title: Carousel : Set first loop image as active item
body: <p>I'm using <code>carousel</code> in order to display some pictures from my <code>django</code> application. The carousel displays pictures from a list of pictures and I would like to set the first one as <code>active</code>.</p>
  
  <p>This is my script :</p>
  
  <pre><code>    &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
            &lt;!-- Indicators --&gt;
            &lt;ol class="carousel-indicators"&gt;
              {% for publication in publication_list_carousel %}
                &lt;li data-target="#myCarousel" data-slide-to="{{ publication.id }}" class="active"&gt;&lt;/li&gt;
              {% endfor %}
            &lt;/ol&gt;
  
            &lt;!-- Wrapper for slides --&gt;
            &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
                &lt;img src="" alt="Cover page"&gt;
              &lt;/div&gt;
              {% for publication in publication_list_carousel %}
                &lt;div class="item"&gt;
                  {% thumbnail publication.cover "200x200" crop="center" as im %}
                    &lt;img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"&gt;
                  {% endthumbnail %}
                  &lt;div class="carousel-caption"&gt;
                    &lt;h3&gt;{{ publication.title }} ({{ publication.pub_id }})&lt;/h3&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              {% endfor %}
            &lt;/div&gt;
  
            &lt;!-- Left and right controls --&gt;
            &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
              &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
              &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I have this line :</p>
  
  <pre><code>&lt;div class="item active"&gt;
      &lt;img src="" alt="Cover page"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I would like to set active the first element from there :</p>
  
  <pre><code>{% for publication in publication_list_carousel %}
      &lt;div class="item"&gt;
          {% thumbnail publication.cover "200x200" crop="center" as im %}
               &lt;img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"&gt;
          {% endthumbnail %}                   
      &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>How I could make that ?</p>
  
  <p>Thank you !</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>I tried something like this in my code but it doesn't work :</p>
  
  <pre><code>{% for publication in publication_list_carousel %}
      &lt;div class="item {% if loop.index == 1 %} active {% endif %}"&gt;
  </code></pre>