JS旋转木马(carousel.js)
该木马插件是通过元素循环，就像一个旋转木马（幻灯片）的组件。
对于有关旋转木马的教程，请阅读我们Bootstrap旋转木马教程 。
注：旋转木马不会在Internet Explorer 9的适当的支持和更早版本（因为它们使用CSS3过渡和动画来实现幻灯片效果）。
旋转木马插件类
| 类 | 描述 |
|---|---|
| .carousel | 创建一个旋转木马 |
| .slide | 滑动从一个项目到下一时添加一个CSS过渡和动画效果。 删除此类，如果你不想要这个效果 |
| .carousel-indicators | 在传送带再添指标。 这些都是在各滑动件的底部的小点（这表示有多少的幻灯片中有转盘，并且滑动用户正在查看） |
| .carousel-inner | 添加幻灯片旋转木马 |
| .item | 指定每张幻灯片的内容 |
| .left carousel-control | 增加了一个左按钮转盘，它允许用户在幻灯片之间回去 |
| .right carousel-control | 增加了一个右按钮转盘，它允许用户在幻灯片之间前进 |
| .carousel-caption | 指定标题的旋转木马 |
通过data-*属性
该data-ride="carousel"属性激活传送带。
该data-slide和data-slide-to属性，这些属性滑到去指定。
该data-slide属性接受两个值： 上一个或下一个 ，而data-slide-to接受的数字。
例
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
试一试» 通过JavaScript
与手动启用：
例
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
试一试» 旋转木马选项
选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到数据 - 如数据间隔=“”。
| 名称 | 类型 | 默认 | 描述 | 尝试一下 |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | 指定每张幻灯片之间的延迟（以毫秒为单位）。 注意：设置间隔为false可以自动滑动停止项目 | 使用JS 使用数据 |
| pause | string, or the boolean false | "hover" | 暂停从通过当鼠标指针进入转盘下一张幻灯片去旋转木马，并继续当鼠标指针离开传送带滑动 注：暂停设置为false，停止，暂停悬停的能力 | 使用JS 使用数据 |
| wrap | boolean | true | 指定传送带是否应该通过所有幻灯片持续，或在最后一张幻灯片停止
| 使用JS 使用数据 |
旋转木马的方法
下表列出了所有可用的旋转木马的方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .carousel( options ) | 激活与选项的传送带。 见上面的有效值选项 | 尝试一下 |
| .carousel("cycle") | 通过传送带的物品进入从左至右 | 尝试一下 |
| .carousel("pause") | 从通过的项目会停止旋转木马 | 尝试一下 |
| .carousel(number) | 进到一个指定项（从零开始：第一项为0，第二项为1，等等。） | 尝试一下 |
| .carousel("prev") | 转到上一个项目 | 尝试一下 |
| .carousel("next") | 进入到下一个项目 | 尝试一下 |
旋转木马活动
下表列出了所有可用的旋转木马事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| slide.bs.carousel | 当转盘即将滑出从一个项目到另一个发生 | 尝试一下 |
| slid.bs.carousel | 当转盘完成滑动从一个项目到另一个发生 | 尝试一下 |
例子
字幕幻灯片
添加<div class="carousel-caption">每个中<div class="item">创建每张幻灯片的标题：
例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a
class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="right carousel-control" href="#myCarousel" role="button"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
试一试»