Source

旋轉木馬

用於循環播放元素（圖像或文本幻燈片）的幻燈片組件，如輪播。

這個怎麼運作

輪播是一個幻燈片，用於循環瀏覽一系列內容，使用 CSS 3D 轉換和一些 JavaScript 構建。它適用於一系列圖像、文本或自定義標記。它還包括對上一個/下一個控件和指示器的支持。

在支持Page Visibility API的瀏覽器中，當網頁對用戶不可見時（例如瀏覽器選項卡處於非活動狀態、瀏覽器窗口最小化等），輪播將避免滑動。

該組件的動畫效果依賴於prefers-reduced-motion媒體查詢。請參閱我們可訪問性文檔的減少運動部分。

請注意，不支持嵌套輪播，並且輪播通常不符合可訪問性標準。

最後，如果你從源代碼構建我們的 JavaScript，它需要util.js.

例子

輪播不會自動標準化幻燈片尺寸。因此，您可能需要使用其他實用程序或自定義樣式來適當調整內容的大小。雖然輪播支持上一個/下一個控件和指示器，但它們並不是明確要求的。根據需要添加和自定義。

該類.active需要添加到其中一張幻燈片，否則輪播將不可見。還要確保在.carousel可選控件上設置唯一的 id，尤其是當您在單個頁面上使用多個輪播時。控件和指示器元素必須具有與元素的 id 匹配的data-target屬性（或href用於鏈接）.carousel。

僅幻燈片

這是一個只有幻燈片的旋轉木馬。請注意輪播圖像上的.d-block和.w-100以防止瀏覽器默認圖像對齊。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

帶控件

添加上一個和下一個控件：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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 src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </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>

帶字幕

使用.carousel-caption任何.carousel-item. 它們可以很容易地隱藏在較小的視口中，如下所示，使用可選的顯示實用程序。我們最初使用隱藏它們，.d-none然後使用.d-md-block.

第一張幻燈片標籤

Nulla vitae elit libero，一種 pharetra augue mollis interdum。

第二張幻燈片標籤

Lorem ipsum dolor sit amet, consectetur adipiscing elit。

第三張幻燈片標籤

Praesent commodo cursus magna, vel scelerisque nisl consectetur。

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

淡入淡出

添加.carousel-fade到您的輪播以使用淡入淡出過渡而不是幻燈片為幻燈片製作動畫。

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

個人`.carousel-item`間隔

添加data-interval=""到 a.carousel-item以更改自動循環到下一個項目之間的延遲時間。

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

用法

通過數據屬性

使用數據屬性輕鬆控制輪播的位置。data-slide接受關鍵字prevor next，它改變相對於當前位置的幻燈片位置。或者，使用data-slide-to將原始幻燈片索引傳遞給 carousel data-slide-to="2"，這會將幻燈片位置移動到以開頭的特定索引0。

該data-ride="carousel"屬性用於將輪播標記為在頁面加載時開始動畫。如果你不使用data-ride="carousel"初始化你的輪播，你必須自己初始化它。它不能與同一輪播的（冗餘和不必要的）顯式 JavaScript 初始化結合使用。

通過 JavaScript

手動調用輪播：

$('.carousel').carousel()

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到中data-，如data-interval="".

姓名	類型	默認	描述
間隔	數字	5000	自動循環項目之間的延遲時間。如果為 false，carousel 將不會自動循環。
鍵盤	布爾值	真的	輪播是否應對鍵盤事件做出反應。
暫停	字符串 \| 布爾值	“徘徊”	如果設置為`"hover"`，則暫停旋轉木馬`mouseenter`的循環並恢復旋轉木馬的循環`mouseleave`。如果設置為`false`，則將鼠標懸停在輪播上不會暫停它。在支持觸摸的設備上，當設置為時`"hover"`，循環將暫停`touchend`（一旦用戶完成與輪播的交互）兩個時間間隔，然後自動恢復。請注意，這是對上述鼠標行為的補充。
騎	細繩	錯誤的	在用戶手動循環第一個項目後自動播放輪播。如果是“carousel”，則在加載時自動播放輪播。
裹	布爾值	真的	轉盤是否應連續循環或硬停止。
觸碰	布爾值	真的	輪播是否應支持觸摸屏設備上的左/右滑動交互。

方法

異步方法和轉換

所有 API 方法都是異步的並開始一個轉換。他們在轉換開始但在結束之前立即返回給調用者。此外，過渡組件上的方法調用將被忽略。

有關更多信息，請參閱我們的 JavaScript 文檔。

`.carousel(options)`

使用可選選項初始化輪播object並開始循環瀏覽項目。

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

`.carousel('cycle')`

從左到右循環瀏覽輪播項目。

`.carousel('pause')`

停止輪播在項目中循環。

`.carousel(number)`

將輪播循環到特定幀（基於 0，類似於數組）。在顯示目標項目之前（即在slid.bs.carousel事件發生之前）返回給調用者。

`.carousel('prev')`

循環到上一個項目。在上一個項目顯示之前（即在slid.bs.carousel事件發生之前）返回給調用者。

`.carousel('next')`

循環到下一個項目。在顯示下一個項目之前（即在slid.bs.carousel事件發生之前）返回給調用者。

`.carousel('dispose')`

銷毀元素的輪播。

活動

Bootstrap 的 carousel 類公開了兩個用於連接 carousel 功能的事件。這兩個事件都具有以下附加屬性：

direction：輪播的滑動方向（"left"或"right"）。
relatedTarget：作為活動項滑入到位的 DOM 元素。
from: 當前項的索引
to: 下一項的索引

所有輪播事件都在輪播本身（即在<div class="carousel">）觸發。

事件類型	描述
slide.bs.carousel	`slide`調用實例方法時立即觸發此事件。
slide.bs.carousel	當輪播完成其幻燈片轉換時會觸發此事件。

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

更改過渡持續時間

如果您使用已編譯的 CSS ，.carousel-item可以在編譯或自定義樣式之前使用 Sass 變量更改過渡持續時間。$carousel-transition如果應用了多個轉換，請確保首先定義轉換轉換（例如transition: transform 2s ease, opacity .5s ease-out）。