Question

我正在尝试将twitter bootstrap 3幻灯片显示到模板中，但是，我无法设置标志变量。第一个div需要一个active item类，其余的应该只有一个item类。我怎样才能在for循环中实现这一目标？

{% 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 %}

我已经尝试过：

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为True

Answer 2

<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>

Django中的Bootstrap Carousel实现

2 个答案: