用树枝和循环不工作的bootstrap旋转木马

时间:2016-10-13 21:57:44

标签: twitter-bootstrap twig carousel

我尝试在for循环中使用twig实现bootstrap轮播。我的目标是创建一个twig模板,他将带有图像的数组显示在轮播中,这样我就可以将它重复用于我网站上的几个轮播。 我尝试了很多提示而没有成功。 所以我需要一些帮助,这里可能是我能找到的最好的地方:)。

这是我的代码:

twig template 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>

图像是我调用模板时加载的数组,如下所示:

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

通过这种方式,轮播不起作用(自动滑动和按钮),我得到错误代码

  

TypeError:f [0]未定义

但是,如果我在同一个文件carousel.html.twig中编写没有for循环的代码,就可以:没有错误代码TypeError:f [0]未定义

carousel.html.twig没有for循环:

<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源代码时,两者是相同的。我不明白我哪里错了...... 如果有人有解决方案,我将非常感谢你们。)

1 个答案:

答案 0 :(得分:2)

您必须删除项目和活动类之间的短划线:

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