Django Bootstrapv5 проблема карусели с несколькими элементами
Я хочу, чтобы мои элементы карусели содержали не более 5 тегов карточек. Однако, когда я добавляю больше карточек и их становится больше пяти, они не создают еще один элемент карусели, а просто переполняются в той же карусели. Как я могу решить эту проблему. Вот мой код:
<div class="carousel-box">
<div id="carousel-1" class="carousel slide" data-bs-interval="false" data-bs-wrap="false">
<div class="carousel-inner">
{% for knowledge in knowledges %}
<div class="carousel-item {% if forloop.first %}active{% endif %}">
<div class="row">
{% for photo in photo01s %}
{% if photo.category01 == knowledge %}
<div class="card" style="background-image: url('{{ photo.image01.url }}');"></div>
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
Я написал так, но это неэффективно.
<div class="carousel-box">
<div id="carouselExample" class="carousel slide" data-bs-interval="false" data-bs-wrap="false">
<div class="carousel-inner">
{% for knowledge in knowledges %}
{% if forloop.first %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<div class="row">
{% with photo_count=0 %}
{% for photo in photo01s %}
{% if photo.category01 == knowledge %}
{% if photo_count < 5 %}
<div class="card" style="background-image: url('{{ photo.image01.url }}');">
</div>
{% endif %}
{% increment photo_count %}
{% endif %}
{% endfor %}
{% endwith %}
</div>
</div>
{% endfor %}
</div>
</div>