如何在引导轮播中使用 for 循环

Posted

技术标签:

【中文标题】如何在引导轮播中使用 for 循环【英文标题】:how to use for loop with bootstrap carousel 【发布时间】:2016-06-20 14:21:31 【问题描述】:

我已经知道如何使用引导轮播,但问题是我想将我的精选故事呈现在轮播中。 目前我有一个显示三张幻灯片的轮播,但我想要做的是有特色故事而不是三张幻灯片。

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

    % 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"   />          <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>

【问题讨论】:

【参考方案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 %

如果还有classtitle等其他信息,也可以在featuredStory的上下文中设置,然后在此处渲染为titleurl

【讨论】:

【参考方案2】:

for loop在下一个方式动态创建div[class=item]

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

【讨论】:

以上是关于如何在引导轮播中使用 for 循环的主要内容,如果未能解决你的问题,请参考以下文章

负边距如何在引导轮播中起作用?

在引导轮播中使用图像而不是幻灯片背景

在引导轮播中加载多个谷歌图表

引导轮播中的响应式图像

如何在引导轮播下使缩略图可滚动?

当引导轮播选择器选择了类时启动函数