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">&nbsp; &nbsp; <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">&nbsp; &nbsp; &nbsp; &nbsp; <?php if( have_rows('aa-gallery') ): ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Indicators -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ol class="carousel-indicators">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $count = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while ( have_rows('aa-gallery') ) : the_row();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li data-target="#myCarousel" data-slide-to="<?php echo $count; ?>" class="<?php if (!$count) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>active<?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } ?>"></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endwhile;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ol>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Wrapper for slides -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-inner">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $count = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while ( have_rows('aa-gallery') ) : the_row();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="item <?php if (!$count) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>active<?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="<? the_sub_field('aa-gpic');?> " alt="<? the_sub_field('aa-caption');?>" style="width: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="carousel-caption">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php the_sub_field('aa-caption'); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $count++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; endwhile;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Left and right controls -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="left carousel-control" href="#myCarousel" data-slide="prev">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-chevron-left"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Previous</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="right carousel-control" href="#myCarousel" data-slide="next">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-chevron-right"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Next</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; </div></div>对于 JS 中更优雅的解决方案，在初始化滑块之前，您应该计算项目的数量，然后用匹配的元素数量填充指标列表。但是上面的代码也应该足够好用。