Карусель с данными бэкенда, показывающая все изображения или без изображений

Я запускаю приложение Django, в котором я получаю список изображений, и в моем шаблоне у меня есть следующий код для Carousel.

Проблема в том, что если я использую этот класс "carousel-inner active" во время итерации все изображения становятся активными и все изображения показываются на одном экране, если нет, если я удалю active и просто сохраню carousel-inner ни одно изображение не показывается

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

Ответом было использование контейнера for-loop внутри 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>
Вернуться на верх