Jinja2和Bootstrap传送带-"item active" [英] Jinja2 and Bootstrap carousel - "item active"
问题描述
我是Jinja的新手,这是我在Stack Overflow上的第一篇文章.
我正在尝试遍历由引导轮播/模式处理的图像库.我能够让它工作. <img>
和<div>
正确呈现,但是我无法遍历活动元素.在网络上搜索时,我发现宏可以帮助实现此目标,但是我对使用它们并不熟悉.这是我正在处理的代码:
I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img>
and <div>
are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
推荐答案
Jinja for循环具有计数器,因此您可以检查自己是否在循环的第一次迭代中,并使该循环成为活动幻灯片.
Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
类似这样的东西:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
这篇关于Jinja2和Bootstrap传送带-"item active"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!