Как использовать для петли с автозагрузкой bootstrap

Question

Я выяснил, как использовать бутстрап-карусель, но проблема в том, что я хочу, чтобы мои показанные истории были в карусели. В настоящее время у меня есть карусель, который показывает три слайда, но то, что я пытаюсь сделать, - это отличные истории вместо трех слайдов.

<div class='carousel slide' id="myCarousel"> 

     <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#myCarousel"></li> 
     <li class="active" data-slide-to="1" data-target="#myCarousel"></li> 
     <li class="active" data-slide-to="2" data-target="#myCarousel"></li> 
     </ol> 


     <div class="carousel-inner"> 
     <div class="item active" id="slide1"> 
      <img src="http://i.imgur.com/SQ691ZO.jpg" > 
      <div class="carousel-caption"> 
      <h4>hello</h4> 
      <p>hi you</p> 
      </div> 
     </div> 

     <div class="item" id="slide2"> 
      <img src="http://i.imgur.com/zN4h51m.jpg" > 

      <div class="carousel-caption"> 
      <h4>hello</h4> 
      <p>hi you</p> 
      </div> 
     </div> 

     <div class="item" id="slide3"> 
      <img src="http://i.imgur.com/3ruWvoG.jpg"> 

      <div class="carousel-caption"> 
      <h4>hello</h4> 
      <p>hi you</p> 
      </div> 
     </div> 
     </div> 

     <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> 
     <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> 

Так вот что я пробовал, это не совсем работает. У меня есть

{% for a in featuredStory %} 
    {{a.title}} 
    {{a.sub}} 
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/> 

    {% endfor %} 

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

Вот, то, что я пытался

<div class="row"> 
    <div class="col-sm-8"> 
    {% for a in featuredStory %} 

    <div class='carousel slide' id="myCarousel"> 

     <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#myCarousel"></li> 
     <li class="active" data-slide-to="1" data-target="#myCarousel"></li> 
     <li class="active" data-slide-to="2" data-target="#myCarousel"></li> 
     </ol> 


     <div class="carousel-inner"> 
     <div class="item active" id="slide1"> 
<img src='{{a.get_featuredImage_url}}' class="img-rounded" alt="Cinque Terre" width="330" height="236"/>   <div class="carousel-caption"> 
      <h4> {{a.title}}</h4> 
      <p>  {{a.sub}} 
</p> 
      </div> 
     </div> 




     </div> 
     <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a> 
     <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a> 

{% endfor %} 

    </div> 
    </div> 

Answer 1

Вы можете использовать цикл внутри carousel-inner:

<div class="carousel-inner"> 
    {% for a in featuredStory %} 
     <div class="item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}"> 
      <img src="{{ a.get_featuredImage_url }}" > 
      <div class="carousel-caption"> 
       <h4>{{ a.title }}</h4> 
       <p>{{ a.sub}}</p> 
      </div> 
     </div> 
    {% endfor %} 
</div> 

Убедитесь, чтобы активировать первый элемент, установив счетчик:

{% if forloop.counter == 1 %}active{% endif %} 

Если есть другая информация, такая как class, title и т. Д., Которые также можно установить в контексте на featuredStory, а затем визуализировать его здесь так же, как title или url.

Answer 2

Создание div[class=item] динамически с for loop в следующем виде:

{% for item in featuredStory %} 
<div class="item" id="slide{{forloop.counter}}"> 
    <img src="item.get_featuredImage_url"> 
    <div class="carousel-caption"> 
    <h4>{{ item.title }}</h4> 
    <p>{{ item.sub }}</p> 
    </div> 
</div> 
{% endfor %}