twitter-bootstrap - 带 Twig 的 Bootstrap 轮播和 for 循环不起作用

Question

我尝试在 for 循环中使用 twig 实现 Bootstrap 轮播。我的目标是创建一个 Twig 模板，该模板采用带有图像的数组以显示在轮播中，这样我就可以将它重复用于我网站上的多个轮播。我尝试了很多技巧都没有成功。所以我需要一些帮助，这里也许是我能找到它的最佳地点 :)。

这是我的代码:

Twig 模板carousel.html.twig:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for image in images %}
            <li data-target="#carousel" data-slide-to="{{ loop.index0 }}" {% if loop.index0 == 0 %} class="active" {% endif %}></li>
            {% endfor %}
    </ol>
    <div class="carousel-inner">
        {% for image in images %}
            <div {% if loop.index0 == 0 %} class="item-active" {% else %} class="item" {% endif %}> 
                <img class="img-responsive center-block" alt="{{ image }}" src="images/{{ image }}"/>
            </div>
        {% endfor %}
    </div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

images 是调用模板时加载的数组，如下所示:

$template = $twig->loadTemplate("carousel.html.twig");
echo $template->render(array('images' => $images));

这样，旋转木马不起作用(自动滑动和按钮)，我得到错误代码

TypeError: f[0] is undefined

但是如果我在同一个文件 carousel.html.twig 中编写没有 for 循环的代码，它可以工作:没有错误代码 TypeError: f[0] is undefined

没有 for 循环的 carousel.html.twig :

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"> <img class="img-responsive center-block" alt="image1" src="images/image1.png"></div>
        <div class="item"> <img class="img-responsive center-block" alt="image2" src="images/image2.png"></div>
        <div class="item"> <img class="img-responsive center-block" alt="image3" src="images/image3.png"></div>
        <div class="item"> <img class="img-responsive center-block" alt="image4" src="images/image4.png"></div>
    </div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

当我用 Firefox 查看 HTML 源代码时，两者是相同的。我不明白我哪里错了...如果有人有解决方案，我将非常感谢:)

Answer 1

您必须删除项目和事件类之间的破折号:

{% if loop.index0 == 0 %} class="item-active" {% else %}

{% if loop.index0 == 0 %} class="item active" {% else %}