在枝杈循环的Bootstrap转盘指示器

时间:2018-01-10 10:48:45

标签: twitter-bootstrap twig

我有一个bootstrap轮播,我有一些指标。根据我在一个页面中的照片数量,我想显示与照片数量相对应的指标。

我试图做一个树枝循环:

<ol class="carousel-indicators">
    {% for i in vehicule.photos|length %}
      <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
    {% endfor %}
</ol>

但是这个循环实际上没有显示任何指标,虽然它们似乎在那里但它们没有显示(萤火虫) 如何循环显示指示器并在转盘上显示它们?

这是完整的旋转木马(除了指标外一切正常)

<div id="myCarousel" class="carousel slide" data-interval="false">
            <ol class="carousel-indicators">
                {% for i in vehicule.photos|length %}
                    <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
                {% endfor %}
            </ol>
            <div class="fiche-vehicule-image">
                <div class="carousel-inner">
                    {% for photo in vehicule.photos %}
                        <div class="item {% if loop.first %}active{% endif %}">
                            <img data-photoswipe-loop="{{ loop.index0 }}" src="{{ photo.imgLarge }}" data-src-xxl="{{ photo.imgXxlarge }}" class="img-responsive">
                        </div>
                    {% endfor %}
                </div>
            </div>
            <a class="left carousel-control left-carousel-block" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left left-carousel-chevron"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control right-carousel-block" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right right-carousel-chevron"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

感谢您提供任何帮助。

1 个答案:

答案 0 :(得分:0)

我找到了答案,以下是我的表现:

<ol class="carousel-indicators">
      {% for i in 0..vehicule.photos|length %}
          <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
      {% endfor %}
</ol>

这是我应用于我的代码的doc

{% for i in 0..10 %}
   * {{ i }}
{% endfor %}