Source

旋轉木馬

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

這個怎麼運作

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

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

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

最後，如果你從源代碼構建我們的 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

帶字幕

使用.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>

淡入淡出

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

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

用法

通過數據屬性

使用數據屬性輕鬆控制輪播的位置。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…
})

更改過渡持續時間

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