带有后端数据的轮播显示所有图像或没有图像

Question

我是运行一个 Django 应用程序，我在其中接收图像列表，在我的模板中，我有以下 Carousel 代码。

问题是如果我在迭代时使用这个class“carousel-inner active”所有图像都设置为活动并且所有图像都显示在一个屏幕上，否则如果我删除活动并保持旋转木马- 内部没有显示图像

<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
  </div>

  <!-- The slideshow/carousel -->
  <div class="carousel-inner active">
      {% for image in data.images %}
    <div class="carousel-item active">
      <img src="{{ image }}" alt="image 1" class="d-block" style="width:100%">
    </div>
      {% endfor %}

  <!-- Left and right controls/icons -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Answer 1

答案是在 div

中使用 for-loop 容器

<div class="carousel-inner">
{% for image in data.images %}
    <div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
        <img src="{{ image }}" class="d-block" style="width:100%">
    </div>
{% endfor %}
</div>

带有后端数据的轮播显示所有图像或没有图像

Carousel with backend data showing all images or no images

html

javascript

django

bootstrap-5