Question

我正在使用 single bootstrap carousel 并面临一个问题。轮播有几个项目/图像要显示，这些项目之一必须是活动的。代码如下：

<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}

如何将所有图片中的第一张图片设置为活动图片？

Here`s the link 看看我的轮播是如何工作的。

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>

设置引导轮播

1 个答案: