1

I want to make a Bootstrap carousel with matrix when the user adds 2 or more images. the first part i get, but how can i make matrix deal with the complex code from bootstrap?

{visitor:profiel_fotos}
    {if total_rows=="1"}
        {exp:ce_img:pair src="{profiel_fotobestand}" width="600" height="350" crop="y" allow_scale_larger="yes"}
            <img src="{made}" width="{width}" height="{height}"/>
        {/exp:ce_img:pair}  
    {if:else}
<!-- Carousel-->
        <div id="myCarousel" class="carousel slide">
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>
         <div class="carousel-inner">
<!-- Carousel items -->
            {if row_count=="1"}
                    {exp:ce_img:pair src="{profiel_fotobestand}" width="600" height="350" crop="y" allow_scale_larger="yes"}
                        <div class="active item"><img src="{made}" width="{width}" height="{height}"/></div>
                    {/exp:ce_img:pair}
                {if:else}
                    {exp:ce_img:pair src="{profiel_fotobestand}" width="600" height="350" crop="y" allow_scale_larger="yes"}
                        <div class="item"><img src="{made}" width="{width}" height="{height}"/></div>
                    {/exp:ce_img:pair}
                {/exp:ce_img:pair}
            {/if}
         </div>
<!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="websymbol1"><</i></a>
          <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="websymbol1">></i></a>
<!--/ Carousel-->
        </div>
    {/if}   
{/visitor:profiel_fotos}

1 Answer 1

2

Probably the most direct (although not necessarily the most efficient) way is something like the following:

{if '{matrix_field:total_rows}' == 1}
    {exp:ce_img:single src="{profiel_fotobestand}" width="600" height="350" crop="y" allow_scale_larger="yes"} 
{/if}

{if '{matrix_field:total_rows}' > 1}
<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        {matrix_field}
            <li data-target="#myCarousel" data-slide-to="{row_index}" {if row_count == 1}class="active"{/if}></li>
        {/matrix_field}
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">
        {matrix_field}
            <div class="{if row_count == 1}active{/if} item">
                {exp:ce_img:single src="{profiel_fotobestand}" width="600" height="350" crop="y" allow_scale_larger="yes"}
            </div>
        {/matrix_field}
    </div>

    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="websymbol1">&lt;</i></a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="websymbol1">&gt;</i></a>
</div>
{/if}

You could also build the pagers with a javascript function to eliminate an extra matrix loop, or use something like Stash to loop through once and get the pager and slides in different containers.

2
  • Oh yeh now i see, i looped everything. Now the next challenge to let ee start count from 0 because thats what the slider wants for the dots.
    – Eddyfever
    Feb 27, 2013 at 17:58
  • Ah, yeah sorry I missed that. {row_index} will count from zero. I'll update my answer.
    – Kara Todd
    Feb 27, 2013 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.