Skip to main content Skip to docs navigation
View on GitHub

Carousel (カルーセル)

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

On this page

How it works

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

Page Visibility API がサポートされているブラウザでは、ブラウザのタブがアクティブではない場合やウィンドウが最小化されいる場合など、ページが表示されていない場合はカルーセルは動きません。

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

入れ子になっているカルーセルはサポートされていません。カルーセルは一般的にアクセシビリティ基準に準拠していないことに注意してください。

Example

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

スライドのいずれかに .active クラスを追加する必要があります。 そうしないとカルーセルは表示されません。また、オプションのコントロールのために .carousel に一意の ID を設定する必要があります。コントロールとインジケータの要素には、.carousel 要素の ID と一致する data-bs-target 属性 (リンクの場合は href`) を持たなければなりません。

Slides only

スライドのみのカルーセルです。カルーセルの画像に .d-blockと .w-100 があることに注意してください。

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

With controls

前後のコントロールを追加します。

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

With indicators

カルーセルには、コントロールと並んでインジケーターを追加することもできます。

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-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-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

With captions

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

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleCaptions" data-bs-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>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

Crossfade

.carousel-fade をカルーセルに追加すると、スライドの代わりにフェードトランジションでスライドをアニメーションさせることができます。

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

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

<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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

Dark variant

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

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
    <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

Usage

Via data attributes

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

data-bs-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用されます。 data-bs-ride="carousel" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。同じカルーセルの（冗長かつ不要な）明示的なJavaScript初期化と組み合わせて使用することはできません。

Via JavaScript

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

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Options

オプションは、データ属性またはJavaScriptを介して渡すことができます。 データ属性の場合は、 data-bs-interval="" のように、オプション名を data-bs-に追加します。

Name Type Default Description
interval number 5000 アイテムが自動的に循環するまでの時間を指定します。falseの場合、カルーセルは自動的に循環しません。
keyboard boolean true カルーセルがキーボードイベントに反応するかどうかを指定できます。
pause string | boolean "hover"

"hover"に設定されている場合、mouseenterでカルーセルの循環を一時停止し、mouseleaveでカルーセルの循環を再開します。 false に設定すると、カルーセルの上にカーソルを置いても一時停止しません。

タッチ対応デバイスでは、"hover" に設定すると、サイクルは touchend (ユーザーがカルーセルとの対話を終了すると) で 2 つの間隔で一時停止し、その後自動的に再開します。これは上記のマウスの動作に加えてのことであることに注意してください。
slide string | boolean false ユーザーが最初のアイテムを手動で循環させた後、カルーセルを自動再生します。"carousel"の場合、ロード時にカルーセルを自動再生します。
wrap boolean true カルーセルを連続的に循環させるか、ハードストップさせるかを指定します。
touch boolean true タッチスクリーンデバイスでカルーセルが左右スワイプインタラクションをサポートするかどうかを指定します。

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

たとえば、カルーセルコンストラクターでカルーセルインスタンスを作成して、追加のオプションで初期化し、アイテムの循環を開始できます。

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Method Description
cycle カルーセルのアイテムを左から右へ循環させます。
pause カルーセルがアイテムを循環するのを停止します。
prev 前のアイテムに循環します。前のアイテムが表示される前に戻ります。 (e.g., before the slid.bs.carousel event occurs).
next 次のアイテムに循環します。次のアイテムが表示される前に戻ります。 (e.g., before the slid.bs.carousel event occurs).
nextWhenVisible カルーセルを特定のフレームに循環させます (0 をベースにしています。)。対象アイテムが表示される前に呼び出し元に戻ります。。 (e.g., before the slid.bs.carousel event occurs).
to カルーセルを特定のフレームに循環させます（0が基準。配列に似ています）. ターゲットアイテムが表示される前に戻ります (e.g., before the slid.bs.carousel event occurs).
dispose 要素のカルーセルを破壊します。
getInstance DOM 要素に関連付けられたカルーセルのインスタンスを取得する静的メソッドです。

Events

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

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

すべてのカルーセルイベントはカルーセル自体で発生します。 (i.e. at the <div class="carousel">).

Event type Description
slide.bs.carousel slide インスタンス・メソッドが呼び出されたときに直ちに発生します。
slid.bs.carousel カルーセルのスライド遷移が完了したときに発生します。 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Change transition duration

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