我尝试在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源代码时,两者是相同的。我不明白我哪里错了...... 如果有人有解决方案,我将非常感谢你们。)
答案 0 :(得分:2)
您必须删除项目和活动类之间的短划线:
{% if loop.index0 == 0 %} class="item-active" {% else %}
{% if loop.index0 == 0 %} class="item active" {% else %}