Bootstrap> Карусель> Количество индикаторов должно соответствовать изображениям

Question

Я пытаюсь создать ползунок карусели и заставил его работать, используя Bootstrap + Расширенные пользовательские поля. Все работает отлично, но я не могу понять, как сделать так, чтобы индикаторы соответствовали количеству изображений, которые у меня есть. Так как написано индивидуально для каждого изображения. Я не очень хорошо разбираюсь в JS, поэтому я выбрал этот подход, используя Bootstrap. Что касается ACF, я использую Repeater и подполе Image (даже если бы я назвал это галереей;))

Помощь будет оценена.

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>
    
        <!-- 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>
  </div>
</div>
    
</section>

Answer 1

Самое простое решение, вероятно, состоит в том, чтобы использовать PHP для индикаторов точно так же, как вы используете его для перечисления самих карусельных элементов:

<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, перед тем, как инициализировать ползунок, вы должны посчитать количество элементов, а затем заполнить список индикаторов соответствующим количеством элементов. Но приведенный выше код также должен работать достаточно хорошо.