Django для цикла в Карусели

Я пытаюсь добавить заголовок к каждому слайду в динамической карусели в Django. У меня есть изображения, функционирующие должным образом и работающие, как ожидалось. Заголовок складывается на первом слайде, а по мере продвижения к концу слайда он удаляет заголовок, и когда он достигает конца, у него остается только один заголовок, и он правильный. Как лучше всего это исправить?

html

 <div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                {% for item in carousel_items %}
                    {% if forloop.first %}
                      <div class="carousel-item {% if forloop.first %} active {% endif %}">
                        <img src="{{ item.carousel_picture.url }}" class="d-block w-100">
                      </div>
                      
                      <div class="carousel-caption d-none d-sm-block">
                        <h5 class="text-white">{{ item.carousel_title }}</h5>
                      </div>
                    {% else %}
                      <div class="carousel-item {% if  forloop.first %} active {% endif %}">
                        <img src="{{ item.carousel_picture.url }}" class="d-block w-100">
                      </div>
                        <div class="carousel-caption d-none d-sm-block {% if  forloop.first %} active {% endif %}">
                          <h5 class="text-white">{{ item.carousel_title }}</h5>
                        </div>
                    {% endif %}
                <a class="carousel-control-prev" href="#CarouselWithControls" role="button" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#CarouselWithControls" role="button" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
                {% endfor %}

views.py

def gallery(request):
    carousel_items = CarouselItem.objects.all()
    context = {'carousel_items': carousel_items}
    return render(request, 'home/gallery.html', context=context)

models.py

class CarouselItem(models.Model):
    carousel_title = models.CharField(max_length=200 , blank=True, null=True)
    carousel_picture = models.ImageField(upload_to='carousel_images/', null=True, blank=True)

С наилучшими пожеланиями,

Джаред

В итоге выяснилось, что это была ошибка форматирования. Вот исправленный рабочий код для тех, кто может искать в будущем.

Работа с html

<div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                {% for item in frame_items %}
                    {% if forloop.first %}
                      <div class="carousel-item {% if forloop.first %} active {% endif %}">
                        <h2 class="text-center">{{ item.frame_title }}</h2>
                        <img src="{{ item.frame_picture.url }}" class="d-block w-100">
                        <h5 class="text-center">{{ item.frame_description }}</h5>
                      </div>
                    {% else %}
                      <div class="carousel-item {% if  forloop.first %} active {% endif %}">
                        <h2 class="text-center">{{ item.frame_title }}</h2>
                        <img src="{{ item.frame_picture.url }}" class="d-block w-100">
                        <h5 class="text-center">{{ item.frame_description }}</h5>
                      </div>
                    {% endif %}
                <a class="carousel-control-prev" href="#CarouselWithControls" role="button" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#CarouselWithControls" role="button" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
                </a>
                {% endfor %}
Вернуться на верх