Карусель: установить изображение первого цикла в качестве активного элемента - PullRequest
Новая
       10

Карусель: установить изображение первого цикла в качестве активного элемента

0 голосов
/ 18 октября 2018

Я использую 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 %}">

1 Ответ

0 голосов
/ 18 октября 2018

Я нашел что-то с помощью Javascript.Я удалил класс active в своем коде и написал: 

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

Кажется, он работает нормально;)

...