th3fr33man th3fr33man - 1 month ago 20
Twig Question

bootstrap carousel with twig and for loop not working

I try to implement a bootstrap carousel with twig in a for loop. My goal is to create a twig template who take an array with the images to show in the carousel, in this way i can reuse it for several carousel on my site.
I try many tips without success.
So i need some help and here is maybe the best place where i can found it :).

Here is my code:

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>


images is an array loaded when i call the template, like this:

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


In this way, the carousel doesn't work(automatique slide and button) and i get the error code


TypeError: f[0] is undefined


But if i write my code without for loop in the same file carousel.html.twig, it works : there is no error code TypeError: f[0] is undefined

carousel.html.twig without for loop :

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


When i look the HTML source code with Firefox the both are equal. I don't understand where i'm wrong...
If someone have a solution i will be wonderfull thanks a lot :)

Answer

You have to remove the dash between item and active classes:

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