Dynamically add .carousel-indicators to Bootstrap Carousel with WP and ACF
<p>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? </p>

<pre><code>&lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;

      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;&lt;h1&gt;Testimonials&lt;/h1&gt;
      &lt;div class="carousel-inner" role="listbox"&gt;

          &lt;?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();
                   ?&gt; 
                &lt;div class="item 
                    &lt;?php if ($count==0) {echo "active";} ?&gt;"
                &gt;
                    &lt;div class="container"&gt;
                         &lt;div class="carousel-caption"&gt;
                         &lt;p&gt;&lt;?php the_sub_field('testimony') ?&gt;&lt;/p&gt;
                         &lt;p&gt;&lt;?php the_sub_field('name') ?&gt;&lt;/p&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
        &lt;/div&gt;
        &lt;?php
            $count=$count+1;
            }
            }
            ?&gt;         


        &lt;/div&gt;
      &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
</code></pre>