php bootstrap 轮播指标

Question

我在此处阅读了放置 php 代码以创建 bootstrap 轮播的解决方案：

PHP with Bootstrap Carousel

但是我对指标有点问题，如果我把 php 代码放在那里，只出现 1 个指标。我希望显示的指标与数据库中的图像一样多。

希望有人能提供帮助。

我现在的代码只是指标的非php代码，我总是只得到 1 个指标。

<!-- Wrapper for slides -->
<div class="carousel-inner">
  <?php
    $counter = 1;
    foreach($images->results() as $image){
  ?>
                    
  <div class="item<?php if($counter <= 1){echo " active"; } ?>">
    <img class="carouselimg" src="<?php echo $image->url; ?>" alt="<?php echo $image->description; ?>">
  </div>
                    
  <!-- Indicators --> //This is what I can't find
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    //also tried <li data-target="#myCarousel" data-slide-to=<?php echo $counter-1;?> class=<?php if($counter <= 1){echo 'class="active"'}?>></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
                    
                    <?php
                        $counter++;
                        }
                    ?>
                </div>

Answer 1

主要问题是您要为每张幻灯片重复生成整个指标 <ol>。您应该只生成一次 <ol>，并且在其中您应该为每张幻灯片生成一个 <li>：

<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
    // Carousel items:

    $counter = 1;
    foreach($images->results() as $image){
?>
                                        
    <div class="item<?php if($counter <= 1){echo " active"; } ?>">
        <img class="carouselimg" src="<?php echo $image->url; ?>" alt="<?php echo $image->description; ?>">
    </div>
<?php
        $counter++;
    }
?>
    <!-- Indicators --> //This is what I can't find
    <ol class="carousel-indicators">
<?php

    $counter = 1;
    foreach($images->results() as $image){
?>
        <li data-target="#myCarousel" data-slide-to="<?= $counter ?>" <?php if ($counter==1){ ?>class="active"<?php } ?>></li>
    </ol>
                                        
<?php
        $counter++;
    }
?>
</div>

php bootstrap 轮播指标

php bootstrap carousel indicators

php

indicator

carousel

bootstrap-4