Динамическая карусель в django с использованием bootstrap carousel

Я работаю над проектом, где мне нужна динамическая карусель в моем html.Проблема в том, что я делаю карусель, которая имеет максимум 5 слайдов, но я получаю только 4 слайда и я не могу даже перейти к последнему слайду с помощью кнопок, а также кнопка prev не работает, когда я на втором последнем слайде. Я использовал bootstrap carousel .
Views.py

class HomeView(View):

    def get(self,request):
        return render(request,'MainSite/home.html',{'carousel_item' : carousel_item})

home.html

<div style = "padding : 10px 10px 10px 10px;margin-top : 20px;">
<div id="carouselExampleCaptions" class="carousel slide mx-3" data-bs-ride="carousel">
  <div class="carousel-indicators">
    {%for item in carousel_item %}
    {% if forloop.first %}
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    {% else %}
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    {% endif %}
    
    {% endfor %}
  </div>
  <div class="carousel-inner">
    {%for item in carousel_item %}
    {% if forloop.first %}
    <div class="carousel-item active">
      <img src="{{item.title_image}}" class="d-block w-100" height = "350px" >
      <div class="carousel-caption d-none d-md-block">
        <h5>{{item.title}}</h5>
        <p>{{item.subtitle}}</p>
      </div>
    </div>
    {% else %}
    <div class="carousel-item">
      <img src="{{item.title_image}}" class="d-block w-100" height = "350px" >
      <div class="carousel-caption d-none d-md-block">
        <h5>{{item.title}}</h5>
        <p>{{item.subtitle}}.</p>
      </div>
    </div>

    {% endif %}
    

{% endfor %}

  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</div>

Допустим, в моей базе данных есть 5 записей с названиями one,two,three,four,five, что я получаю в качестве вывода как five,four,three,two и по какой-то причине я не могу использовать nav prev buuton. Может ли кто-нибудь указать, что я упускаю здесь .
Заранее спасибо и Любой совет будет полезен.

Вернуться на верх