旋转木马插件
该木马插件是通过元素循环，就像一个旋转木马（幻灯片）的组件。
提示：插件可以单独包括（用Bootstrap's个体"carousel.js"文件），或一次（使用"bootstrap.js"或"bootstrap.min.js"
旋转木马示例
哈尼亚
哈尼亚的气氛有淡淡的佛罗伦萨和威尼斯。
哈尼亚
哈尼亚的气氛有淡淡的佛罗伦萨和威尼斯。
花卉
Beatiful花Kolymbari，克里特岛。
花卉
Beatiful花Kolymbari，克里特岛。
注：旋转木马不会在Internet Explorer 9的适当的支持和更早版本（因为它们使用CSS3过渡和动画来实现幻灯片效果）。
如何创建一个旋转木马
下面的例子演示如何创建一个基本的旋转木马：
例
<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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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>
试一试» 例子解释：
最外层<div>
转盘需要使用一个id的（在这种情况下id="myCarousel"用于传送带的控制才能正常工作。
本class="carousel"指定该<div>包含一个旋转木马。
所述.slide类添加一个CSS过渡和动画效果，这使得物品滑动示出一个新的项目时。 忽略这个类，如果你不想要这个效果。
该data-ride="carousel"属性告诉引导开始时立即动画旋转木马加载页面。
该“指标”的一部分：
各项指标均达到每张幻灯片的底部（表示有在旋转木马多少幻灯片，以及滑动用户正在观看）的小圆点。
各项指标均带班的有序列表中指定.carousel-indicators 。
该data-target属性指向转盘的ID。
该data-slide-to属性，该属性滑去，在特定点时，点击指定。
在“包装幻灯片”的一部分：
幻灯片在指定<div>带班.carousel-inner 。
每张幻灯片的内容是在一个定义<div>带班.item 。 这可以是文本或图像。
的.active类需要被添加到幻灯片中的一个。 否则，该转盘将不可见。
“左，右控制”部分：
此代码将“左”和“右”按钮，允许用户手动去来回幻灯片之间。
该data-slide属性接受关键字"prev"或"next" ，这相对于当前位置的滑动位置改变。
添加字幕幻灯片
添加<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>
试一试» 完成Bootstrap旋转木马参考
对于所有的旋转木马选项，方法和事件的完整参考，请访问我们的Bootstrap JS木马参考 。