幻燈片組件，用于循環(huán)瀏覽元素 - 文本的圖像或幻燈片 - 如旋轉(zhuǎn)木馬。

怎么運(yùn)行的

該輪播是一個(gè)幻燈片循環(huán)瀏覽一系列內(nèi)容，使用 CSS 3D 轉(zhuǎn)換和一些 JavaScrip t構(gòu)建。它適用于一系列圖像，文本或自定義標(biāo)記。它還包括對前一個(gè)/下一個(gè)控件和指標(biāo)的支持。

在支持頁面可見性 API 的瀏覽器中，當(dāng)網(wǎng)頁對用戶不可見時(shí)（例如，當(dāng)瀏覽器選項(xiàng)卡處于非活動狀態(tài)，瀏覽器窗口被最小化等）時(shí)，傳送帶將避免滑動。

請注意，嵌套傳送帶不受支持，傳送帶通常不符合輔助功能標(biāo)準(zhǔn)。

最后，如果你從源代碼構(gòu)建我們的 JS，它需要util.js。

示例

傳送帶不會自動標(biāo)準(zhǔn)化幻燈片尺寸。因此，您可能需要使用其他實(shí)用程序或自定義樣式來適當(dāng)調(diào)整內(nèi)容大小。雖然傳送帶支持上一個(gè)/下一個(gè)控件和指示符，但它們不是明確需要的。如您所見，添加并自定義。

請務(wù)必在.carousel可選控件上設(shè)置唯一的 ID ，特別是在單個(gè)頁面上使用多個(gè)輪播時(shí)。

僅限幻燈片

這是一個(gè)只有幻燈片的旋轉(zhuǎn)木馬。請注意傳送帶圖像.d-block和.img-fluid傳送帶圖像的存在，以防止瀏覽器默認(rèn)圖像對齊。

<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)添加到圓盤傳送帶上，并與控件一起添加。

<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)容中的元素輕松為您的幻燈片添加標(biāo)題.carousel-item。它們可以很容易地隱藏在較小的視口中，如下所示，帶有可選的顯示實(shí)用程序。我們最初.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相對于其當(dāng)前位置改變滑動位置?；蛘?，使用data-slide-to將原始幻燈片索引傳遞給圓盤傳送帶data-slide-to="2"，將幻燈片位置移至以特定索引開頭的位置0。

data-ride="carousel"屬性用于在轉(zhuǎn)頁加載時(shí)將轉(zhuǎn)盤標(biāo)記為動畫。它不能與相同輪播的顯式 JavaScript 初始化（冗余和不必要的）組合使用。

通過 JavaScript

通過以下方式手動調(diào)用輪播：

$('.carousel').carousel()

選項(xiàng)

選項(xiàng)可以通過數(shù)據(jù)屬性或 JavaScript 傳遞。對于數(shù)據(jù)屬性，請將選項(xiàng)名稱附加到中data-，如data-interval=""。

方法

異步方法和轉(zhuǎn)換

所有 API 方法都是異步的并開始轉(zhuǎn)換。一旦轉(zhuǎn)換開始但在結(jié)束之前，它們就立即返回給調(diào)用者。另外，對轉(zhuǎn)換組件的方法調(diào)用將被忽略。

查看我們的 JavaScript 文檔以獲取更多信息。

.carousel(options)

使用可選選項(xiàng)初始化輪播object并開始循環(huán)通過項(xiàng)目。

$('.carousel').carousel({
  interval: 2000})

.carousel('cycle')

從左到右循環(huán)傳送帶項(xiàng)目。

.carousel('pause')

阻止旋轉(zhuǎn)木馬通過項(xiàng)目循環(huán)。

.carousel(number)

將傳送帶循環(huán)到特定幀（基于0，類似于數(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è)元素的圓盤傳送帶。

活動

Bootstrap 的旋轉(zhuǎn)木馬類公開了兩個(gè)事件用于掛接輪播功能。這兩個(gè)事件都具有以下附加屬性：

• direction：傳送帶滑動的方向（"left"或者"right"）。

• relatedTarget：作為活動項(xiàng)目滑動到位的DOM元素。

• from：當(dāng)前項(xiàng)目的索引

• to：下一個(gè)項(xiàng)目的索引

所有旋轉(zhuǎn)木馬事件都在旋轉(zhuǎn)木馬本身（即在<div class="carousel">）發(fā)射。

$('#myCarousel').on('slide.bs.carousel', function () {  // do something…})