По неизвестным причинам не работает карусель. Кусок кода взял прямо из документации, библиотеку bootstrap подключил локально. Если это важно, то еще использую jquary
html:
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for i in images %}
<div class="carousel-item">
<img src="{{ i.image.url }}" class="d-block w-100" alt="...">
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Порядок подключаемых файлов:
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'jquary/main.js' %}"></script>
<Мои js-файлы>
UPD:
Нашел решение. Поймал себя на невнимательности: на одном из слайдов обязательно нужно указывать класс .active. Урывок из
оффициальной документации Bootstrap:
"
The .active class needs to be added to one of the slides otherwise the carousel will not be visible. Also be sure to set a unique id on the .carousel for optional controls, especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-target attribute (or href for links) that matches the id of the .carousel element."
Простой