[Python] Django for loop in Carousel

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

Continue reading...