in English

旋轉木馬

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

這個怎麼運作

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

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

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

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

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

例子

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

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

帶控件

添加上一個和下一個控件。我們建議使用<button>元素，但您也可以將<a>元素與role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

帶字幕

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

<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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

淡入淡出

添加.carousel-fade到您的輪播以使用淡入淡出過渡而不是幻燈片為幻燈片製作動畫。根據您的輪播內容（例如，純文本幻燈片），您可能希望向 s 添加.bg-body或一些自定義 CSS 以.carousel-item進行正確的交叉淡入淡出。

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

添加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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

禁用觸摸滑動

輪播支持在觸摸屏設備上向左/向右滑動以在幻燈片之間移動。這可以使用data-touch屬性禁用。下面的示例也不包含該data-ride屬性，data-interval="false"因此它不會自動播放。

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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，輪播將不會自動循環。
鍵盤 布爾值 真的 輪播是否應對鍵盤事件做出反應。
暫停 字符串 | 布爾值 '徘徊'

如果設置為'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')

銷毀元素的輪播。

.carousel('nextWhenVisible')

當頁面不可見或輪播或其父級不可見時，請勿將輪播循環到下一個。在顯示下一個項目之前（即在slid.bs.carousel事件發生之前）返回給調用者。

.carousel('to')

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

活動

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）。