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>
試一試»