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}