Bootstrap JS Carousel
JS Carousel (carousel.js)
Carousel 外掛是一個用於迴圈切換元素的元件，例如輪播（幻燈片）。
有關 Carousel 的教程，請閱讀我們的 Bootstrap Carousel 教程。
注意： Carousel 在 Internet Explorer 9 及更早版本中不支援（因為它使用 CSS3 過渡和動畫來實現滑動效果）。
Carousel 外掛類
| 類 | 描述 |
|---|---|
| .carousel | 建立輪播 |
| .slide | 在從一個專案滑動到下一個專案時新增 CSS 過渡和動畫效果。如果您不想要此效果，請刪除此類。 |
| .carousel-indicators | 為輪播新增指示器。這些是每個幻燈片底部的點（指示輪播中有多少個幻燈片，以及使用者當前正在檢視哪個幻燈片）。 |
| .carousel-inner | 為輪播新增幻燈片 |
| .icon-next | Unicode 圖示（指向右箭頭的圖示），用於輪播。這通常用於替換 glyphicon。 |
| .icon-prev | Unicode 圖示（指向左箭頭的圖示），用於輪播。這通常用於替換 glyphicon。 |
| .item | 指定每個幻燈片的內容 |
| .left carousel-control | 為輪播新增一個左側按鈕，允許使用者在幻燈片之間後退。 |
| .right carousel-control | 為輪播新增一個右側按鈕，允許使用者在幻燈片之間前進。 |
| .carousel-caption | 為輪播指定標題 |
透過 data-* 屬性
data-ride="carousel" 屬性用於啟用輪播。
data-slide 和 data-slide-to 屬性指定要轉到的幻燈片。
data-slide 屬性接受兩個值：prev 或 next，而 data-slide-to 接受數字。
示例
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 指示器 -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel 控制元件 -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
自己動手試一試 »
透過 JavaScript
使用以下命令手動啟用：
示例
// 啟用 Carousel
$("#myCarousel").carousel();
// 啟用 Carousel 指示器
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// 啟用 Carousel 控制元件
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
自己動手試一試 »
Carousel 選項
可以透過 data 屬性或 JavaScript 傳遞選項。對於 data 屬性，將選項名稱附加到 data-，例如 data-interval="”。
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| interval | 數字，或布林值 false | 5000 | 指定每個幻燈片之間的延遲（以毫秒為單位）。 注意：將 interval 設定為 false 可停止專案自動滑動。 |
使用 JS 使用 data |
| pause | 字串，或布林值 false | "hover" | 當滑鼠指標進入輪播時，暫停輪播切換到下一張幻燈片，當滑鼠指標離開輪播時，恢復滑動。 注意：將 pause 設定為 false 可停止滑鼠懸停暫停功能。 |
使用 JS 使用 data |
| wrap（換行） | boolean | true | 指定輪播是否應該連續迴圈所有幻燈片，還是在最後一張幻燈片停止。
|
使用 JS 使用 data |
Carousel 方法
下表列出了所有可用的輪播方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .carousel(options) | 使用一個選項啟用輪播。有關有效值，請參閱上面的選項。 | 試一試 |
| .carousel("cycle") | 從左到右迴圈輪播專案。 | 試一試 |
| .carousel("pause") | 停止輪播切換專案。 | 試一試 |
| .carousel(number) | 轉到指定專案（基於零：第一個專案是 0，第二個專案是 1，依此類推）。 | 試一試 |
| .carousel("prev") | 轉到上一項。 | 試一試 |
| .carousel("next") | 轉到下一項。 | 試一試 |
Carousel 事件
下表列出了所有可用的輪播事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| slide.bs.carousel | 當輪播即將從一個專案滑動到另一個專案時觸發。 | 試一試 |
| slid.bs.carousel | 當輪播完成從一個專案滑動到另一個專案時觸發。 | 試一試 |
更多示例
幻燈片標題
在每個 <div class="item"> 中新增 <div class="carousel-caption"> 來為每個幻燈片建立標題。
示例
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<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>
<!-- 滑塊的包裝器 -->
<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>Chania 的氛圍帶有佛羅倫薩和威尼斯的感覺。</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>Chania 的氛圍帶有佛羅倫薩和威尼斯的感覺。</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>克里特島 Kolymbari 的美麗鮮花。</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>克里特島 Kolymbari 的美麗鮮花。</p>
</div>
</div>
</div>
<!-- 左右控制 -->
<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">上一張</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">下一張</span>
</a>
</div>
自己動手試一試 »
