Bootstrap 轮播 - 在 javascript 中循环答案

【问题标题】：Bootstrap carousel - loop in javascriptBootstrap 轮播 - 在 javascript 中循环
【发布时间】：2019-03-23 01:31:02
【问题描述】：

我正在尝试使用引导轮播，但无法真正使其正常工作。我有一个列表，其中包含我想要循环播放并在轮播中显示的图片。我无法显示所有图片，因为“激活”（下文中的第 3 行）仅应用于第一张图片（而不应用于列表中的其他图片）。这意味着我需要对“激活”进行某种限制。可能类似于“仅对第一个循环使用激活”。我不太确定该怎么写。我正在用 javascript（新手）编写，并且很难将其合并到 html 文件中。

  <div class="carousel-inner">
        {% for image in images %}
          <div class="carousel-item active">
            <img src="{{ url_for('static', filename='images/' + image.image) }}" alt="{{ name }} product image" class="d-block w-100">
          </div>
        {% endfor %}
    </div>

【问题讨论】：

你在这里使用的是模板引擎，而不仅仅是js。
在您的模板中，您需要一个 if 语句。检查图像是否是第一个，如果是则添加活动类，如果不是则不。
或者，您可以放置第一个图像并将其设置为活动状态，然后循环遍历所有其余图像而不将其设置为活动状态（js 等效于 array.slice(1)）。

标签： javascript html bootstrap-4 carousel

【解决方案1】：

你在这里使用了一些模板语言，我认为是 Django。

你需要在 if 块中激活类。

 {% if image in images is first %} active {% endif %}
 {% with %} {% endwith %}

我认为你可以使用 with 语法。这个例子只是你需要遵循的逻辑。只要找到正确的语法。其他不需要更改。

【讨论】：