Carousel (カルーセル)

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

On this page

How it works

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

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

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

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

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

With indicators

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

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

With captions

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

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

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

Individual `.carousel-item` interval

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

Disable touch swiping

左右のスワイプによるスライド間の移動をサポートしています。これを無効にするには、data-bs-touch 属性を使用します。以下の例では、data-bs-ride 属性を含まず、data-bs-interval="false" としているため、自動再生されません。

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

Dark variant

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

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.

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

Custom transition

The transition duration of .carousel-item can be changed with the $carousel-transition-duration Sass variable before compiling or custom styles if you’re using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. transition: transform 2s ease, opacity .5s ease-out).

Sass

Variables

$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`)

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

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

非同期のメソッドとトランジション

すべての API メソッドは非同期で、トランジションを開始します。トランジションが開始されると同時に呼び出し元に返されますが、トランジションが終了する前に返されます。また、遷移中のコンポーネントに対するメソッドコールは無視されます。

詳しくは JavaScript のドキュメントをご覧ください。

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

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

Carousel (カルーセル)

How it works

Example

Slides only

With controls

With indicators

With captions

First slide label

Second slide label

Third slide label

Crossfade

Individual .carousel-item interval

Disable touch swiping

Dark variant

First slide label

Second slide label

Third slide label

Custom transition

Sass

Variables

Usage

Via data attributes

Via JavaScript

Options

Methods

非同期のメソッドとトランジション

Events

Change transition duration

Individual `.carousel-item` interval