Jinja2 и Bootstrap carousel - "item active"

Question

Я новичок в 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> 

Answer 1

Дзиндзя для петли имеют счетчики, так что вы можете проверить, если вы находитесь на первой итерации цикла и сделать это один активный слайд.

Что-то вроде этого:

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