Matrix bootstrap carousel

Question

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}

Answer 1

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.