Question

我已经想出如何使用bootstrap轮播，但问题是我想将我的特色故事呈现在旋转木马中。目前我有一个显示三张幻灯片的旋转木马，但我想要做的是创作故事而不是三张幻灯片。

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

中使用for循环

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

如何使用bootstrap轮播的循环

2 个答案: