Bootstrap轮播实现在Django中

Question

我试图将twitter bootstrap 3幻灯片演示实现为一个模板，但是，我不能设置flag变量。第一个div需要一个active item类，其余的应该只有一个item类。我怎样才能在循环中最好地实现这一点？

{% for review in reviews|slice:":3" %}
    <div class="carousel-inner">

    {% if forloop.counter0|divisibleby:"3" %}
     <div class="active item">
    {% else %}
    <div class="item">
    {% endif %}
    <blockquote>
         <p>{{ review.description }}</p>
    </blockquote>
    <label>{{ review.business }}</label>
    </div>
{% endfor %}

我已经试过了：

• Split Django Queryset in template for Bootstrap Carousel
• Implementing twitter bootstrap carousel v2.3.2
• Dynamic carousel with django and bootstrap

Answer 1

试试这个：

<div class="carousel-inner">
{% for review in reviews|slice:":3" %}
    {% if forloop.first %}
        <div class="active item">
    {% else %}
        <div class="item">
    {% endif %}
        <blockquote>
            <p>{{ review.description }}</p>
        </blockquote>
        <label>{{ review.business }}</label>
    </div>
{% endfor %}
</div>

如果这是第一次通过循环，则forloop.first为真

Answer 2

&13；

&13；

<div class="carousel-inner" role="listbox">
    {% for agent in agents %}
    <!-- item -->
        <div class="carousel-item text-center text-light mb-5 {% if forloop.first %} active{% endif %}">
            <img src="{{ agent.image.url }}" class="img-fluid rounded-circle mb-3" width="150">
            <p class="px-3">{{ agent.description }}</p>
        </div>
    <!-- end item -->
    {% endfor %}
</div>

；

；

；