Jinja2 和 Bootstrap 轮播 - “项目活动”答案

【问题标题】：Jinja2 and Bootstrap carousel - "item active"Jinja2 和 Bootstrap 轮播 - “项目活动”
【发布时间】：2016-02-14 03:03:35
【问题描述】：

我是 Jinja 的新手，这是我在 Stack Overflow 上的第一篇文章。我正在尝试循环浏览由引导轮播/模态处理的图像库。我能够让它工作； <img> 和 <div> 渲染正确，但是我无法循环通过活动元素。在网上搜索，我发现宏可以帮助实现它，但我不熟悉使用它们。这是我正在处理的代码：

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

【问题讨论】：

标签： python html twitter-bootstrap jinja2

【解决方案1】：

Jinja for 循环有计数器，因此您可以检查您是否处于循环的第一次迭代中，并将其设为活动幻灯片。

类似这样的：

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

【讨论】：