如何在 Bootstrap 3 carousel yii2 中設置活動幻燈片

Question

嗨，伙計們，我對一件事感到困惑

我正在使用如下所示的php循環在carousel分配超過 3 4 張圖像

<div class="carousel-inner" id="loop">
    <div class="item">
         <?php foreach ($model->Images as $model2) { ?>
         <div class="item">
              <img class="img-responsive" src="<?= Yii::$app->request->hostInfo?>/upload/<?=$model2->image?>" alt="">
         </div>
         <?php }  ?>          
</div>

它不會單獨顯示圖像，因為我沒有將任何幻燈片指定為活動狀態，而且我無法找到如何通過 javascript 或任何其他方式將第一張幻燈片或任何這些幻燈片類設置為active

我應該在這里使用什么？ Javascript或carousel任何其他屬性？

Answer 1

您可以將第一個圖像或項目設置為活動狀態

    <?php $counter=0; foreach ($model->Images as $model2) { $counter++; ?>
     <div class="item <?= ($counter==1)?'active':'' ?> ">
          <img class="img-responsive <?= ($counter==1)?'active':'' ?> " src="<?= Yii::$app->request->hostInfo?>/upload/<?=$model2->image?>" alt="">
     </div>
     <?php }  ?>