Django for loop in Carousel

Question

I'm trying to add a title to each slide in a dynamic carousel in Django. I have the images functioning properly and working as expected. The title is stacking on the first slide and as it progresses towards the end it removes a title and once it reaches the end it has only one title and it is correct. What would be the best way to fix this?

Update: I have the matching title with the matching image now but it is no longer in a carousel. The images are being displayed in a list now. here is my updated html. Models.py and Views.py is still the same

Updated html

<div id="CarouselWithControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                {% for item in carousel_items %}
                <div class="item {% if forloop.counter == 1 %}active{% endif %}" id="CarouselWithControls">
                    <img class="d-block w-100" src="{{ item.carousel_picture.url }}" >
                    <div class="carousel-caption">
                        <h4 class="text-white">{{ item.carousel_title }}</h4>
                    </div>
                </div>
                <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>
              </div>
              {% endfor %}

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)

Kindest Regards,

Jared

Answer 1

FInally figured it out it was a formatting error. Here is the corrected working code for anyone that may be searching in the future.

Working 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 %}