我已经知道如何使用引导轮转,但问题是我想把我的特色故事呈现在旋转木马中。 目前,我有一个显示三张幻灯片的旋转木马,但我想做的是用特色故事代替三张幻灯片。在
<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>
所以这是我尝试的,但不太管用。 我有
^{pr2}$工作正常,但问题是把这些和旋转木马结合起来。 有一个特色的故事很管用,但如果有不止一个,我会在顶部的底部找到一个。在
我试过了
<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>
用
for loop
动态创建div[class=item]
,方法如下:您可以在
carousel-inner
内使用for循环:确保通过检查计数器激活第一项:
^{pr2}$如果还有其他信息,如}。在
class
、title
等,也可以在featuredStory
的上下文中设置这些信息,然后将其呈现为title
或{相关问题 更多 >
编程相关推荐