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