Bootstrap轮播指示器Twig循环不显示问题排查与解决

你的问题主要出在Twig循环的写法错误和active类的滥用上，这两个问题导致指示器无法正常渲染显示，下面一步步帮你修正：

1. 错误原因分析 #

• 循环逻辑错误：你用{% for i in vehicule.photos|length %}的写法，Twig会把长度值当作一个数字序列来遍历（比如长度是3的话，i会是1、2、3），但Bootstrap的data-slide-to需要从0开始计数，这种写法生成的索引不符合要求。
• active类错误：你给所有指示器都加了active类，Bootstrap要求只有当前激活的指示器（默认是第一个）才有这个类，多个active会导致样式冲突，指示器无法正常显示。

2. 修正后的完整代码 #

最简洁的方式是直接遍历图片数组，利用Twig的loop变量来处理索引和active状态：

<div id="myCarousel" class="carousel slide" data-interval="false">
    <!-- 修正后的指示器部分 -->
    <ol class="carousel-indicators">
        {% for photo in vehicule.photos %}
            <li 
                data-target="#myCarousel" 
                data-slide-to="{{ loop.index0 }}" 
                {% if loop.first %}class="active"{% endif %}
            ></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>

3. 代码说明 #

• 直接遍历vehicule.photos数组，循环次数和图片数量完全匹配，避免了长度计算的误差。
• loop.index0获取从0开始的索引，完美对应Bootstrap轮播的data-slide-to要求（轮播项的索引也是从0开始的）。
• 只有第一个指示器（loop.first）添加active类，和轮播内容里的第一个item保持一致，符合Bootstrap的样式规则。

另一种可选写法（基于range） #

如果你不想遍历图片数组，也可以用Twig的range函数生成索引序列：

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

这种方式通过range(0, 长度-1)生成从0到最后一个索引的序列，效果和上面的写法一致。

修改后，指示器应该就能正常显示并和轮播内容联动了。

内容的提问来源于stack exchange，提问作者chicken burger