如何在引导轮播中使用 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 %
如果还有class
、title
等其他信息,也可以在featuredStory
的上下文中设置,然后在此处渲染为title
或url
。
【讨论】:
【参考方案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 循环的主要内容,如果未能解决你的问题,请参考以下文章