我有一个旋转木马,我正在使用Twitter引导程序。
我必须在里面放5个项目。我举一个简单的例子:
<div id="carolsel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-lg-3">
<p>Content</p>
</div>
<div class="col-lg-3">
<p>Content</p>
</div>
<div class="col-lg-3">
<p>Content</p>
</div>
<div class="col-lg-3">
<p>Content</p>
</div>
</div>
<div class="item">
<div class="col-lg-3">
<p>Content</p>
</div>
</div>
</div>
</div>
它显示4个项目,然后单独显示一个项目。有一种方法可以制作一个无限的旋转木马,这样第一个内容就出现在最后一个内容之后?
item
div由和foreach动态创建,内容来自MYSQL数据库。
Bootstrap 3转盘的默认行为是以无限的方式循环项目。请参阅引导程序3文档中的第一个转盘示例:引导程序3文件-请参阅转盘部分
在旋转木马的文档中的"选项"部分,控制循环行为的设置名为wrap,默认值设置为true,以便连续循环。
在下面的示例HTML(来自文档)中,请注意,每个内容(图像等)都将放在自己的div容器中:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>