Html Question posted in
Some basic documentation can be found here.

Html – Django Bootstrapv5 item in carousel-item problem

I want my carousel-item at least it have 5 cards. But it only has one card in each carousel-item.
What should I do.:

                {% for knowledge in knowledges %}
                <div class="carousel-inner">
                    {% for photo in photo01s|slice:":5" %}
                    <div class="carousel-item {% if forloop.first %}active{% endif %}">
                        <div class="row">
                            
                            {% if photo.category01 == knowledge %}
                            <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div>
                            {% endif %}
                            
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endfor %}

I have tried several ways but it does not work.

Tags:

2

Answers


  1. 0

    Let’s assume that you want 5 photos of each knowledge and assuming you have more than 5 photos of each knowledge, so:

    1. class carousel-inner outside the for loop.

    2. Now you will atleast 5 photos of each knowledge in carousel.

    <div class="carousel-inner">
    {% for knowledge in knowledges %}
        {% set count = 0 %}
        {% for photo in photo01s %}
            {% if photo.category01 == knowledge %}
                {% set count = count + 1 %}
                <div class="carousel-item {% if forloop.first %}active{% endif %}">
                    <div class="row">
                        <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    {% endfor %}
</div>
    Login or Signup to reply.
  2. 0

    You should iterate over knowledges and within each knowledge, iterate through the corresponding photos until you have at least 5 cards, so:

    <div class="carousel-inner">
    {% for knowledge in knowledges %}
    <div class="carousel-item {% if forloop.first %}active{% endif %}">
        <div class="row">
            {% assign count = 0 %}
            {% for photo in photo01s %}
            {% if count < 5 and photo.category01 == knowledge %}
            <div class="card" style="background-image: url('{{ photo.image01.url }}');"></div>
            {% assign count = count | plus: 1 %}
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

    Now it will loop through each knowledge and then within each knowledge, it will loop through photos until it finds 5 cards.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search