Question

我在Bootstrap / WP中有一个旋转木马工作正常，但是当更多＆＃39;幻灯片＆＃39;添加后，不会创建轮播指示器。＆＃39;幻灯片＆＃39;是从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

1 个答案: