設置引導輪播

Question

我正在使用單引導輪播並面臨一個問題。 輪播有幾個項目/圖像要顯示，其中一個項目必須是活動的。 這是代碼：

<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="**active item**">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

但是，我對 php 中的所有圖像都有一個變量。 我將活動項目留為空白，並為項目設置循環如下：

   <div class="**active item**">…</div>

 {section name=x loop=$similar_data}
   <div class="item">…</div>
 {/section}

如何將所有圖片中的第一張圖片設置為活動圖片？

這是查看我的輪播如何工作的鏈接。

Answer 1

以下是如何使用 JavaScript 將第一項設置為活動：

 const carouselInner = document.querySelector('.carousel-inner'); function makeFirstItemActive() { const firstItem = carouselInner.firstElementChild; firstItem.classList.add('active'); console.log('first item:', firstItem); } makeFirstItemActive();

 <div class="carousel-inner"> <div class="item">first item</div> <div class="item">second item</div> <div class="item">third item</div> </div>