html - 轮播：将第一个循环图像设置为活动项目

Question

我正在使用carousel以显示我的django应用程序中的一些图片。轮播显示图片列表中的图片，我想将第一个设置为active.

这是我的脚本：

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            {% for publication in publication_list_carousel %}
              <li data-target="#myCarousel" data-slide-to="{{ publication.id }}" class="active"></li>
            {% endfor %}
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="" alt="Cover page">
            </div>
            {% for publication in publication_list_carousel %}
              <div class="item">
                {% thumbnail publication.cover "200x200" crop="center" as im %}
                  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
                {% endthumbnail %}
                <div class="carousel-caption">
                  <h3>{{ publication.title }} ({{ publication.pub_id }})</h3>
                </div>
              </div>
            {% endfor %}
          </div>

          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>

如您所见，我有这一行：

<div class="item active">
    <img src="" alt="Cover page">
</div>

但我想从那里设置第一个元素：

{% for publication in publication_list_carousel %}
    <div class="item">
        {% thumbnail publication.cover "200x200" crop="center" as im %}
             <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
        {% endthumbnail %}                   
    </div>
{% endfor %}

我怎么能做到这一点？

谢谢 ！

编辑 ：

我在我的代码中尝试了类似的东西，但它不起作用：

{% for publication in publication_list_carousel %}
    <div class="item {% if loop.index == 1 %} active {% endif %}">

标签： htmltwitter-bootstrapcarousel

Answer 1

我用 Javascript 找到了一些东西。我在我的代码中删除active了类，我写道：

<script>
  $(document).ready(function () {
    $('#myCarousel').find('.item').first().addClass('active');
  });
</script>

它似乎工作正常；）