使用 WP 和 ACF 将 .carousel-indicators 动态添加到 Bootstrap Carousel

Question

我在 Bootstrap/WP 中有一个旋转木马，它工作正常，但是当添加更多 'slides' 时，不会创建旋转木马指示器。 'slides' 是从 ACF 中提取的文本字段。如何使轮播指示器动态化，以便在每个新的 ACF 条目中添加一个？

<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>

Answer 1

我通常也只是循环查看指标。

<?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; ?>

使用 WP 和 ACF 将 .carousel-indicators 动态添加到 Bootstrap Carousel

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

wordpress

carousel

twitter-bootstrap-3

advanced-custom-fields