Карусель не может скользить к следующему изображению, когда я использую forloop в Django

views.py

def index(request):
        books = Book.objects.all()[:4]
        print(books)
        context = {'books':books}
        return render(request,'index.html',context)

index.html

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for book in books%}
                {% if forloop.first %}
                    <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}" class="active"></li>
                {% else %}
                    <li data-target="#myCarousel" data-slide-to="{{forloop.counter0}}"></li>

                {% endif %}
                
            {%endfor%}
        </ol>    
            <div class="carousel-inner">
                {% for book in books %}
                    {% if forloop.first %}
                        <div class="carousel-item active">
                            <img width="250" height="850" class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ book.image.url}}" alt="{{book.title}}">
                            <div style="font-size:50px;color:red;" class="carousel-caption">{{ book.title }}</div>
                        </div>   
                    {% else %}
                        <div class="carousel-item ">
                            <img width="250" height="850" class="d-block w-100 h-50" class="h-50 d-inline-block" src="{{ book.image.url}}" alt="{{book.title}}">
                            <div style="font-size:25px;" class="carousel-caption">{{ book.title }}</div>
                        </div>
                    {% endif %}

                {% endfor %}
            
            </div>
        
        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>

Я собираюсь создать слайдер карусели изображений для первых четырех объектов модели Book. Однако когда я помещаю предыдущий и следующий значки и после нажатия на кнопку, она остается только на первом изображении, а не переходит к следующему. Могу я спросить, в чем проблема, что карусель изображений не может скользить?

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