Dynamically add .carousel-indicators to Bootstrap Carousel with WP and ACF

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>

Related posts

1 comment

  1. I usually just loop through the indicators as well.

    <?php if( have_rows('testimonials') ): $i = 0; ?>
      <ol class="carousel-indicators">
        <?php while ( have_rows('testimonials') ): the_row(); ?>
          <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>" class="<?php if($i == 0) echo 'active'; ?>"></li>
        <?php $i++; endwhile; ?>  
      </ol>
    <?php endif; ?>
    

Comments are closed.