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>
Вернуться на верх