Почему bootstrap carousel и django не работают должным образом?

Я пытаюсь сделать бэкенд карусели на основе bootstrap с django. Я написал простую программу view, которая будет передавать все изображения в шаблон. Но когда я запустил программу, я не получил ожидаемого результата, все изображения отображаются рядом друг с другом. Не было ничего вроде кнопки вперед и назад и т.д. Я выкладываю свой вид и шаблон.

Заранее спасибо.

Надеемся получить от вас ответ в ближайшее время.

Вид:-

def TaggingView(request):
    queryset = MyImage.objects.filter(is_tagged=False)
    return render(request, "taggging.html", {'files': queryset})

Шаблон:-

<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for file in files %}
        <div class="carousel-item active">
            <img class="d-block w-100" src="{{file.image.url}}" alt="slides">
        </div>
        {% endfor %}
    </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>

Django прекрасно работает с каруселью Bootstrap, вам нужно знать об активном классе вот так :

<div id="carouselInd" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for file in files %}
        {% with forloop.counter0 as i %}
        <div class="carousel-item {% if i is 0 %}active{% endif %}">
            <img class="d-block w-100" src="{{ file.image.url }}" alt=" 
            {{ file.name }}" style="height: 30rem;">
        </div>
        {% endwith %}
        {% endfor %}

    </div>
</div>

NB : Атрибут alt является динамическим, вы можете использовать статическое значение, если хотите. А присвоение height изображению может помочь содержать изображение тоже.

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