I am running a Django application where I receive the list of images and in my template, I have the following code for Carousel.
The issue is if I use this class "carousel-inner active" while iterating all images are set active and all images are shown on a single screen, if not if I remove active and just keep carousel-inner no image is shown
<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>
The answer was to use a for-loop container inside div
<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>