CODEWITHSUNDEEP
htmltwitter-bootstrapcarousel
Essex
Essex

Reputation: 6128

Carousel : Set first loop image as active item

I'm using carousel in order to display some pictures from my django application. The carousel displays pictures from a list of pictures and I would like to set the first one as active.

This is my script :

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

As you can see, I have this line :

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

But I would like to set active the first element from there :

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

How I could make that ?

Thank you !

EDIT :

I tried something like this in my code but it doesn't work :

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

Upvotes: 2

Views: 5100

Answers (3)

larp
larp

Reputation: 1067

You can use either of the ff:

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

   /* more codes */
{% endfor %}

or

{% for publication in publication_list_carousel %}
   <div class="item {% if loop.index0 == 0 %} active {% endif %}">
   
   /* more codes */
{% endfor %}

Upvotes: 0

Bibek
Bibek

Reputation: 784

Anyone who is searching for Plain Javascript answer for this.

<script>
 document.querySelector(".carousel-inner").firstChild.classList.add("active");
</script>

Upvotes: 2

Essex
Essex

Reputation: 6128

I found something with Javascript. I removed active class in my code and I wrote :

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

It seems to work fine ;)

Upvotes: 7

Related Questions