title: Dynamically add .carousel-indicators to Bootstrap Carousel with WP and ACF
body: <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>