?
This document uses PHP Chinese website manual Release
幻燈片組件，用于循環(huán)瀏覽元素 - 文本的圖像或幻燈片 - 如旋轉(zhuǎn)木馬。
怎么運行的
該輪播是一個幻燈片循環(huán)瀏覽一系列內(nèi)容，使用 CSS 3D 轉(zhuǎn)換和一些 JavaScrip t構(gòu)建。它適用于一系列圖像，文本或自定義標記。它還包括對前一個/下一個控件和指標的支持。
在支持頁面可見性 API 的瀏覽器中，當網(wǎng)頁對用戶不可見時（例如，當瀏覽器選項卡處于非活動狀態(tài)，瀏覽器窗口被最小化等）時，傳送帶將避免滑動。
請注意，嵌套傳送帶不受支持，傳送帶通常不符合輔助功能標準。
最后，如果你從源代碼構(gòu)建我們的 JS，它需要util.js。
示例
傳送帶不會自動標準化幻燈片尺寸。因此，您可能需要使用其他實用程序或自定義樣式來適當調(diào)整內(nèi)容大小。雖然傳送帶支持上一個/下一個控件和指示符，但它們不是明確需要的。如您所見，添加并自定義。
請務(wù)必在.carousel可選控件上設(shè)置唯一的 ID ，特別是在單個頁面上使用多個輪播時。
僅限幻燈片
這是一個只有幻燈片的旋轉(zhuǎn)木馬。請注意傳送帶圖像.d-block和.img-fluid傳送帶圖像的存在，以防止瀏覽器默認圖像對齊。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div></div>
帶有（使用）控件
在上一個和下一個控件中添加：
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>
帶有（使用）指標
您也可以將指標添加到圓盤傳送帶上，并與控件一起添加。
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>
需要初始活動元素
.active課程需要添加到其中一張幻燈片中。否則，傳送帶將不可見。
帶有字幕
使用.carousel-caption任何內(nèi)容中的元素輕松為您的幻燈片添加標題.carousel-item。它們可以很容易地隱藏在較小的視口中，如下所示，帶有可選的顯示實用程序。我們最初.d-none將它們隱藏起來，并使用.d-md-block將它們帶回到中型設(shè)備上。
<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption d-none d-md-block"> <h3>...</h3> <p>...</p> </div></div>
用法
通過數(shù)據(jù)屬性
使用數(shù)據(jù)屬性可以輕松控制傳送帶的位置。data-slide接受關(guān)鍵字prev或者next相對于其當前位置改變滑動位置?；蛘?，使用data-slide-to將原始幻燈片索引傳遞給圓盤傳送帶data-slide-to="2"，將幻燈片位置移至以特定索引開頭的位置0。
data-ride="carousel"屬性用于在轉(zhuǎn)頁加載時將轉(zhuǎn)盤標記為動畫。它不能與相同輪播的顯式 JavaScript 初始化（冗余和不必要的）組合使用。
通過 JavaScript
通過以下方式手動調(diào)用輪播：
$('.carousel').carousel()選項
選項可以通過數(shù)據(jù)屬性或 JavaScript 傳遞。對于數(shù)據(jù)屬性，請將選項名稱附加到中data-，如data-interval=""。
Name | 類型 | 默認 | 描述 |
|---|---|---|---|
interval | 數(shù) | 5000 | 自動循環(huán)項目之間的延遲時間。如果為false，傳送帶將不會自動循環(huán)。 |
keyboard | 布爾 | 真 | 旋轉(zhuǎn)木馬是否應(yīng)對鍵盤事件作出反應(yīng)。 |
pause | 字符串| 布爾 | “徘徊”("hover") | 如果設(shè)置為“懸停”，則暫停 mouseenter 上的傳送帶循環(huán)并在鼠標離開時恢復(fù)傳送帶循環(huán)。如果設(shè)置為 false，則懸停在旋轉(zhuǎn)木馬上不會暫停。在啟用了觸摸的設(shè)備上，如果設(shè)置為“懸停”，則在自動恢復(fù)之前，騎行者會在觸摸屏上暫停（一旦用戶完成與傳送帶的交互）兩個時間間隔。請注意，這是上述鼠標行為的補充。 |
ride | 串 | 假 | 在用戶手動循環(huán)第一個項目后自動播放傳送帶。如果“傳送帶”在加載時自動播放傳送帶。 |
wrap | 布爾 | 真 | 轉(zhuǎn)盤是否應(yīng)該連續(xù)循環(huán)或難以停止。 |
方法
異步方法和轉(zhuǎn)換
所有 API 方法都是異步的并開始轉(zhuǎn)換。一旦轉(zhuǎn)換開始但在結(jié)束之前，它們就立即返回給調(diào)用者。另外，對轉(zhuǎn)換組件的方法調(diào)用將被忽略。
查看我們的 JavaScript 文檔以獲取更多信息。
.carousel(options)
使用可選選項初始化輪播object并開始循環(huán)通過項目。
$('.carousel').carousel({
interval: 2000}).carousel('cycle')
從左到右循環(huán)傳送帶項目。
.carousel('pause')
阻止旋轉(zhuǎn)木馬通過項目循環(huán)。
.carousel(number)
將傳送帶循環(huán)到特定幀（基于0，類似于數(shù)組）。在顯示目標項目之前（即在slid.bs.carousel事件發(fā)生之前）返回給調(diào)用者。
.carousel('prev')
循環(huán)到上一個項目。在顯示前一個項目之前（即slid.bs.carousel事件發(fā)生之前）返回給調(diào)用者。
.carousel('next')
循環(huán)到下一個項目。在顯示下一個項目之前（即slid.bs.carousel事件發(fā)生之前）返回給調(diào)用者。
.carousel('dispose')
摧毀一個元素的圓盤傳送帶。
活動
Bootstrap 的旋轉(zhuǎn)木馬類公開了兩個事件用于掛接輪播功能。這兩個事件都具有以下附加屬性：
direction：傳送帶滑動的方向（"left"或者"right"）。
relatedTarget：作為活動項目滑動到位的DOM元素。
from：當前項目的索引
to：下一個項目的索引
所有旋轉(zhuǎn)木馬事件都在旋轉(zhuǎn)木馬本身（即在<div class="carousel">）發(fā)射。
事件類型 | 描述 |
|---|---|
slide.bs.carousel | 此事件在調(diào)用幻燈片實例方法時立即觸發(fā)。 |
slid.bs.carousel | 旋轉(zhuǎn)木馬完成幻燈片切換時會觸發(fā)此事件。 |
$('#myCarousel').on('slide.bs.carousel', function () { // do something…})