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

Answer 1

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

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

它似乎工作正常；）

Answer 2

任何正在搜索纯Java脚本的人都会对此进行回答。

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

轮播：将第一个循环图片设置为活动项

2 个答案: