カルーセル

Carousel

カルーセルは,画像やスライドをよこにスライドさせて複数表示させるコンポーネントです。カルーセルの使い方の例を示します。

項目

基礎知識

カルーセルは、CSS 3DトランスフォームとJavaScriptで構築された、一連のコンテンツを循環させるためのスライドショーです。一連の画像、テキスト、カスタムマークアップで動作します。また、前/次のコントロールやインジケータもサポートしています。

パフォーマンス上の理由から、カルーセルはcarousel constructor methodsを使用して手動で初期化する必要があります。初期化を行わないと、ユーザーがコントロールやインジケータを明示的にアクティブにするまで、いくつかのイベントリスナー（特に、タッチ/スワイプのサポートが必要なイベント）が登録されません。

唯一の例外は、data-bs-ride="carousel"属性を持つカルーセルの自動再生で、これらはページロード時に自動的に初期化されます。data属性の自動再生カルーセルを使用する場合は、コンストラクタ・メソッドで同じカルーセルを明示的に初期化しないでください。
ネストされたカルーセルはサポートされていません。また、一般的なカルーセルは、ユーザビリティやアクセシビリティの問題を引き起こす可能性があることに注意する必要があります。

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存します。アクセシビリティのドキュメントのモーションの低減セクションを参照してください。

基本的な例

ここに3つのスライドを持つ基本的なカルーセルがあります。戻る/進むのコントロールに注目して下さい。<button>要素を使うことをお勧めしますが、role="button"を持つ<a>要素を使うこともできます。

html

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

カルーセルはスライドの寸法を自動的に正規化しません。そのため、コンテンツのサイズを適切に調整するために、追加のユーティリティやカスタムスタイルを使用する必要があります。カルーセルは戻る/進むのコントロールとインジケータをサポートしていますが、これらは明示的に必須ではありません。お好きなように追加、カスタマイズしてください。

.activeクラスをスライドの1つに追加する必要があります。また、特に1つのページで複数のカルーセルを使用する場合は、オプションコントロールの.carouselにユニークなidを設定してください。コントロール要素とインジケータ要素には、.carousel要素のidと一致するdata-bs-target属性（リンクの場合はhref）を設定する必要があります。

インジケーター

カルーセルには、戻る/進むコントロールと並んでインジケータを追加できます。このインジケータにより、ユーザーは特定のスライドに直接ジャンプすることができます。

html

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

キャプション

.carousel-item内に.carousel-caption要素を使用して、スライドにキャプションを追加できます。以下に示すように、オプションのディスプレイユーティリティを使用することで、小さいビューポートで簡単に非表示にすることができます。最初は.d-noneで非表示にし、中型のデバイスでは.d-md-blockを使用します。

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

html

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

クロスフェード

カルーセルに.carousel-fadeを追加すると、スライドの代わりにフェード遷移でスライドをアニメーションさせることができます。カルーセルの内容によっては（例：テキストのみのスライド）、適切なクロスフェードを行うために.carousel-itemに.bg-bodyやカスタムCSSを追加したい場合があります。

html

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

カルーセルの自動再生

rideオプションをcarouselに設定することで、ページロード時にカルーセルを自動再生することができます。自動再生されるカルーセルはマウスカーソルを合わせている間、自動的に一時停止します。この動作はpauseオプションで制御することができます。ページ表示のAPIをサポートしているブラウザでは、ウェブページがユーザーから見えないとき(ブラウザのタブが非アクティブになっているときや、ブラウザのウィンドウが最小化されているときなど)、カルーセルは自動再生を停止します。

アクセシビリティ上の理由から、自動再生カルーセルの使用は避けることをお勧めします。あなたのページに自動再生カルーセルが含まれている場合、カルーセルを明示的に一時停止/停止するための追加のボタンまたはコントロールを提供することを推奨します。

WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hideを参照してください。

html

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

carouselのrideオプションがtrueに設定されている場合、カルーセルはページロード時に自動再生を開始しません。その代わりに、最初のユーザーインタラクションの後に開始されます。

html

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <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-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

個々の`.carousel-item`の間隔

.carousel-itemにdata-bs-interval=""を追加して、自動的に次のアイテムに切り替わるまでの遅延時間を変更します。

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

コントロールのないカルーセルの自動再生

スライドのみのカルーセルの画像に.d-blockと.w-100があるのは、ブラウザのデフォルトの画像配置を防ぐためです。

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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>

タッチ・スワイプを無効にする

カルーセルはタッチスクリーンデバイスで左右にスワイプしてスライド間を移動することをサポートします。これはtouchオプションをfalseに設定することで無効にできます。

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ダークバリアント

Deprecated in v5.3.0

.carouselに.carousel-darkを追加して、コントロール、インジケータ、キャプションを暗くすることができます。コントロールは、CSSプロパティfilterでデフォルトの白い塗りつぶしに対して反転されます。キャプションとコントロールには、colorとbackground-colorをカスタマイズするための追加のSass変数があります。

気をつけてください! v5.3.0でカラーモードが導入されたことに伴い、コンポーネントのダークバリアントは非推奨となりました。.carousel-darkを追加する代わりに、ルート要素、親ラッパー、またはコンポーネント自体にdata-bs-theme="dark"を設定してください。

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

カスタムトランジション

.carousel-itemの遷移時間は、コンパイル前に$carousel-transition-durationのSass変数で変更することができます。複数のトランジションが適用される場合、transformトランジションが最初に定義されていることを確認してください（例：transition: transform 2s ease, opacity .5s ease-out）。

CSS

Sass変数

全てのカルーセル用の変数:

scss/_variables.scss

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

暗いカルーセルのための変数:

scss/_variables.scss

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

使い方

データ属性

カルーセルの位置を制御するには、データ属性を使用しますdata-bs-slideはキーワードprevやnextを受け付け、現在の位置に対するスライドの位置を変更します。または、data-bs-slide-toを使用して生のスライドインデックスをカルーセルdata-bs-slide-to="2"に渡します。これにより、スライドの位置が0で始まる特定のインデックスに移動します。

Via JavaScript

カルーセルを手動で呼び出す場合：

const carousel = new bootstrap.Carousel('#myCarousel')

オプション

オプションはデータ属性やJavaScriptで渡すことができるので、data-bs-animation="{value}"のように、data-bs-にオプション名を付加することができる。データ属性でオプションを渡す場合は、オプション名の大文字と小文字を"camelCase“から”kebab-case“に変更することを忘れないようにしましょう。例えば、data-bs-customClass="beautifier"の代わりに data-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0では、全てのコンポーネントが 実験的 予約データ属性 data-bs-config をサポートしており、JSON文字列として簡単なコンポーネント設定を収容することができます。要素に data-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、 titleの最終値は 456で、別々のデータ属性は data-bs-configで与えられた値を上書きする。また、既存のデータ属性にはdata-bs-delay='{"show":0, "hide":150}'のようなJSON値を格納することができるようになっています。

最終的なコンフィギュレーションオブジェクトは data-bs-config、data-bs-、js objectのマージ結果であり、最新のキー値が他の値を上書きする。

Name	Type	Default	Description
`interval`	number	`5000`	アイテムを自動的に循環させるまでの遅延時間です。
`keyboard`	boolean	`true`	カルーセルがキーボードイベントに反応するかどうかを指定できます。
`pause`	string, boolean	`"hover"`	`"hover"`に設定されている場合、`mouseenter`でカルーセルの循環を一時停止し、`mouseleave`でカルーセルの循環を再開します。`false`に設定すると、カルーセルの上にカーソルを置いても一時停止しません。タッチ対応デバイスでは、`"hover"`に設定すると、サイクルは`touchend`(ユーザーがカルーセルとの対話を終了すると)で2つの間隔で一時停止し、その後自動的に再開します。これは上記のマウスの動作に加えてのことであることに注意してください。
`ride`	string, boolean	`false`	`true`に設定すると、ユーザが手動で最初のアイテムを循環させた後にカルーセルを自動で表示します。`"carousel"`に設定すると、ロード時にカルーセルを自動表示します。
`touch`	boolean	`true`	タッチスクリーンデバイスでカルーセルが左右スワイプインタラクションをサポートするかどうかを指定します。
`wrap`	boolean	`true`	カルーセルを連続的に循環させるか、ハードストップさせるかを指定します。

Methods

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに、しかし終了する前に、呼び出し元に戻ります。また、遷移中のコンポーネントに対するメソッド呼び出しは無視されます。詳しくはJavaScriptのドキュメントをご覧ください

カルーセルコンストラクタでカルーセルのインスタンスを作成し、追加のオプションを渡すことができます。例えば、自動再生するカルーセル（マークアップでdata-bs-ride="carousel"属性を使っていない場合）を、タッチサポートを無効にして特定の間隔で初期化するには、次のようにします：

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})

Method	Description
`cycle`	カルーセルのアイテムを左から右へ循環させます。
`dispose`	要素のカルーセルを破壊します。(DOM要素に保存されたデータを削除する)
`getInstance`	DOM要素に関連付けられたカルーセルのインスタンスを取得するための静的メソッドです。次のように使うことができます。:`bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	DOM要素に関連付けられたカルーセルインスタンスを返すか、初期化されていない場合に新しいインスタンスを作成する静的メソッドです。次のように使うことができます:`bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	次のアイテムに循環します。次のアイテムが表示される前に戻ります。(例：`slid.bs.carousel`イベントが発生する前).
`nextWhenVisible`	カルーセルを特定のフレームに循環させます(0をベースにしています。)。対象アイテムが表示される前に呼び出し元に戻ります。.
`pause`	カルーセルがアイテムを循環するのを停止します。
`prev`	前のアイテムに循環します。前のアイテムが表示される前に戻ります。(例：`slid.bs.carousel`イベントが発生する前).
`to`	カルーセルを特定のフレームに循環させます（0が基準。配列に似ています）。ターゲットアイテムが表示される前に戻ります。(例：`slid.bs.carousel`イベントが発生する前)。

イベント

ブートストラップのカルーセルクラスは、カルーセル機能にフックするための2つのイベントがあります。どちらのイベントにも次の追加プロパティがあります。

direction: カルーセルがスライドする方向（「左」または「右」のいずれか）。
relatedTarget: アクティブなアイテムとしてスライドされているDOM要素。
from: 現在のアイテムのインデックス
to: 次の項目のインデックス

すべてのカルーセルイベントはカルーセル自体で発生します。(つまり、<div class="carousel">の部分です)

Event type	Description
`slid.bs.carousel`	カルーセルのスライド遷移が完了したときに発生します。
`slide.bs.carousel`	`slide`インスタンスメソッドが呼び出されると、直ちに発生します。

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

カルーセル

Carousel

基礎知識

基本的な例

インジケーター

キャプション

First slide label

Second slide label

Third slide label

クロスフェード

カルーセルの自動再生

個々の.carousel-itemの間隔

コントロールのないカルーセルの自動再生

タッチ・スワイプを無効にする

ダークバリアント

First slide label

Second slide label

Third slide label

カスタムトランジション

CSS

Sass変数

使い方

データ属性

Via JavaScript

オプション

Methods

イベント

個々の`.carousel-item`の間隔