旋轉木馬插件
該木馬插件是通過元素循環，就像一個旋轉木馬（幻燈片）的組件。
提示：插件可以單獨包括（用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木馬參考 。