Question

在Twitter Bootstrap Carousel Slide中，需要一个名为“active”的类来设置所有幻灯片的第一个图像，然后初始化循环。但是，如果我的对象（我想在幻灯片中显示）处于循环中，如何设置此类？

<div id="myCarousel" class="carousel slide img-polaroid">
  <div class="carousel-inner">

    {% for slide in slides_list %}
    <div class="item"> <!-- Here goes the class="active" -->
      <img src="{{slide.imagem.url}}" alt="{{slide.imagem.titulo}}" />
      <div class="carousel-caption slider">
        <h2>{{slide.titulo}}</h2>
        <p>{{slide.mensagem}}</p>
      </div><!--/carousel-caption-->
    </div><!--/item-->
    {% endfor %}

  </div><!--/carousel-inner-->

  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

</div><!--/myCarousel-->

提前致谢。

Answer 1

{% for slide in slides_list %}
<div class="item{% if forloop.first %} active{% endif %}">
  <img src="{{slide.imagem.url}}" alt="{{slide.imagem.titulo}}" />
  <div class="carousel-caption slider">
    <h2>{{slide.titulo}}</h2>
    <p>{{slide.mensagem}}</p>
  </div><!--/carousel-caption-->
</div><!--/item-->
{% endfor %}

The for tag and the forloop variable docs

如何在特定的（第一个元素）内部循环中放置一个类？

1 个答案: