带有显示所有图像或不显示图像的后端数据的旋转木马

Question

我正在运行一个Django应用程序，在那里我收到了图像列表，在我的模板中，我有下面的Carousel代码。

问题是如果我使用这个类"；转盘内部活动"；当迭代时，所有图像都被设置为活动的，所有图像显示在一个屏幕上，如果不是，如果我删除活动并保持转盘内部，则不会显示图像

<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循环容器

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