I have a carousel in Bootstrap/WP which works fine, but when more ‘slides’ are added, the carousel-indicators are not created. The ‘slides’ are text fields pulled from ACF. How can make the carousel-indicator dynamic, so that one is added with every new ACF entry?
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
</ol><h1>Testimonials</h1>
<div class="carousel-inner" role="listbox">
<?php // check if the repeater field has rows of data
$count = 0;
if( have_rows('testimonials') ){
//loop through
while ( have_rows('testimonials') ){
//define the row
the_row();
?>
<div class="item
<?php if ($count==0) {echo "active";} ?>"
>
<div class="container">
<div class="carousel-caption">
<p><?php the_sub_field('testimony') ?></p>
<p><?php the_sub_field('name') ?></p>
</div>
</div>
</div>
<?php
$count=$count+1;
}
}
?>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
I usually just loop through the indicators as well.