Bootstrap > Carousel > 需要匹配图像的指标数量

Question

我正在尝试创建一个轮播滑块，并使用 Bootstrap + 高级自定义字段使其工作。一切正常，但是我不知道如何使指标与我拥有的图像数量相匹配。因为它是为每个图像单独编写的。我不擅长 JS，这就是我使用 Bootstrap 采用这种方法的原因。至于 ACF，我使用的是 Repeater 和 Image 的一个子字段（甚至我称它为画廊；））帮助将被appriciated。some CSS code here    <div class="container">    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">        <!-- 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>            <!-- Wrapper for slides -->        <div class="carousel-inner">                <?php            if( have_rows('aa-gallery') ):                $count = 0;                while ( have_rows('aa-gallery') ) : the_row();                ?>                    <div class="item <?php if (!$count) {                    ?>active<?php                   } ?>">                        <img src="<? the_sub_field('aa-gpic');?> " alt="<? the_sub_field('aa-caption');?>" style="width: 100%;">                            <div class="carousel-caption">                                <h3>                                    <?php the_sub_field('aa-caption'); ?>                                </h3>                            </div>                        </div>                    <?                                $count++;                endwhile;                        else :                            // no rows found                        endif;                        ?>          </div></section>

Answer 1

最简单的解决方案可能是使用 PHP 作为指标，就像使用它来列出 cariousel 项目本身一样：

<div class="container">

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

        <?php if( have_rows('aa-gallery') ): ?>

          <!-- Indicators -->

          <ol class="carousel-indicators">

            <?php

              $count = 0;

              while ( have_rows('aa-gallery') ) : the_row();

            ?>

            <li data-target="#myCarousel" data-slide-to="<?php echo $count; ?>" class="<?php if (!$count) {

                      ?>active<?php 

                    } ?>"></li>

            <?php

              $count++;

              endwhile;

            ?>

          </ol>

          <!-- Wrapper for slides -->

          <div class="carousel-inner">

              <?php

                  $count = 0;

                  while ( have_rows('aa-gallery') ) : the_row();

                  ?>

                      <div class="item <?php if (!$count) {

                      ?>active<?php 

                    } ?>">

                          <img src="<? the_sub_field('aa-gpic');?> " alt="<? the_sub_field('aa-caption');?>" style="width: 100%;">

                              <div class="carousel-caption">

                                  <h3>

                                      <?php the_sub_field('aa-caption'); ?>

                                  </h3>

                              </div>

                          </div>

                      <?

              $count++;

              endwhile;

              ?>

            </div>

          <!-- Left and right controls -->

          <a class="left carousel-control" href="#myCarousel" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left"></span>

            <span class="sr-only">Previous</span>

          </a>

          <a class="right carousel-control" href="#myCarousel" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right"></span>

            <span class="sr-only">Next</span>

          </a>

        <?php endif; ?>

  </div>

</div>

对于 JS 中更优雅的解决方案，在初始化滑块之前，您应该计算项目的数量，然后用匹配的元素数量填充指标列表。但是上面的代码也应该足够好用。