Bootstrap 輪播（Carousel）插件

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，内容也是足夠靈活的，可以是圖像、内嵌架構、視訊或者其他您想要放置的任何類型的内容。

Bootstrap 輪播（Carousel）插件
如果您想要單獨引用該插件的功能，那麼您需要引用 <b>carousel.js</b>。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

下面是一個簡單的幻燈片，使用 Bootstrap 輪播（Carousel）插件顯示了一個循環播放元素的通用元件。為了實作輪播，您隻需要添加帶有該标記的代碼即可。不需要使用 data 屬性，隻需要簡單的基于 class 的開發即可。

</ol>

</div>

<a class="carousel-control left" href="#myCarousel"

data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>

<a class="carousel-control right" href="#myCarousel"

data-slide="next">&rsaquo;</a>

結果如下所示：

您可以通過 <b>.item</b> 内的 <b>.carousel-caption</b> 元素向幻燈片添加标題。隻需要在該處放置任何可選的 HTML 即可，它會自動對齊并格式化。下面的執行個體示範了這點：

<span class="sr-only">Previous</span>

</a>

<b>通過 data 屬性</b>：使用 data 屬性可以很容易控制輪播（Carousel）的位置。

屬性 <b>data-slide</b> 接受關鍵字 prev 或 next，用來改變幻燈片相對于目前位置的位置。

使用 <b>data-slide-to</b> 來向輪播傳遞一個原始滑動索引，<b>data-slide-to="2"</b> 将把滑塊移動到一個特定的索引，索引從 0 開始計數。

<b>data-ride="carousel"</b> 屬性用于标記輪播在頁面加載時就開始動畫播放。

<b>通過 JavaScript</b>：輪播（Carousel）可通過 JavaScript 手動調用，如下所示：

有一些選項是通過 data 屬性或 JavaScript 來傳遞的。下表列出了這些選項：

選項名稱

類型/預設值

Data 屬性名稱

描述

interval

number

預設值：5000

data-interval

自動循環每個項目之間延遲的時間量。如果為 false，輪播将不會自動循環。

pause

string

預設值："hover"

data-pause

滑鼠進入時暫停輪播循環，滑鼠離開時恢複輪播循環。

wrap

boolean

預設值：true

data-wrap

輪播是否連續循環。

下面是一些輪播（Carousel）插件中有用的方法：

方法

執行個體

.carousel(options)

初始化輪播為可選的 options 對象，并開始循環項目。

.carousel('cycle')

從左到右循環輪播項目。

.carousel('pause')

停止輪播循環項目。

.carousel(number)

循環輪播到某個特定的幀（從 0 開始計數，與數組類似）。

.carousel('prev')

循環輪播到上一個項目。

.carousel('next')

循環輪播到下一個項目。

下面的執行個體示範了方法的用法：

<li data-target="#myCarousel" data-slide-to="0"

class="active"></li>

$(function(){

// 初始化輪播

$(".start-slide").click(function(){

$("#myCarousel").carousel('cycle');

});

// 停止輪播

$(".pause-slide").click(function(){

$("#myCarousel").carousel('pause');

// 循環輪播到上一個項目

$(".prev-slide").click(function(){

$("#myCarousel").carousel('prev');

// 循環輪播到下一個項目

$(".next-slide").click(function(){

$("#myCarousel").carousel('next');

// 循環輪播到某個特定的幀

$(".slide-one").click(function(){

$("#myCarousel").carousel(0);

$(".slide-two").click(function(){

$("#myCarousel").carousel(1);

$(".slide-three").click(function(){

$("#myCarousel").carousel(2);

</script>

下表列出了輪播（Carousel）插件中要用到的事件。這些事件可在函數中當鈎子使用。

事件

slide.bs.carousel

當調用 slide 執行個體方法時立即觸發該事件。

slid.bs.carousel

當輪播完成幻燈片過渡效果時觸發該事件。

下面的執行個體示範了事件的用法：

$('#myCarousel').on('slide.bs.carousel', function () {

alert("當調用 slide 執行個體方法時立即觸發該事件。");