Source

旋轉木馬

用於循環播放元素(圖像或文本幻燈片)的幻燈片組件,如輪播。

這個怎麼運作

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

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

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

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

例子

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

請務必在.carousel可選控件上設置唯一的 id,尤其是當您在單個頁面上使用多個輪播時。

僅幻燈片

這是一個只有幻燈片的旋轉木馬。請注意輪播圖像上的.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任何.carousel-item. 它們可以很容易地隱藏在較小的視口中,如下所示,使用可選的顯示實用程序。我們最初使用隱藏它們,.d-none然後使用.d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

用法

通過數據屬性

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

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…
})