Skip to main content Skip to docs navigation
View on GitHub

カルーセル Carousel

カルーセルのように、画像やテキストのスライドなどの要素を循環させるスライドショーコンポーネントです。

On this page

動作の仕組み

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

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

    唯一の例外は、data-bs-ride="carousel" 属性を持つ自動再生carouselで、これらはページ読み込み時に自動的に初期化されます。データ属性で自動再生carouselを使用している場合は、コンストラクターメソッドで同じcarouselを明示的に初期化しないでください。

  • ネストされたcarouselはサポートされていません。また、一般的にcarouselは使いやすさとアクセシビリティの課題を引き起こすことが多いことに注意してください。

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

基本的な例

3つのスライドを持つcarouselの基本的な例です。前へ/次へのコントロールに注意してください。<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>

carouselはスライドの寸法を自動的に正規化しません。そのため、コンテンツのサイズを適切に設定するために、追加のユーティリティまたはカスタムスタイルを使用する必要がある場合があります。carouselは前へ/次へのコントロールとインジケーターをサポートしていますが、これらは明示的に必要というわけではありません。必要に応じて追加およびカスタマイズしてください。

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

インジケーター

前へ/次へのコントロールと一緒に、carouselにインジケーターを追加できます。インジケーターを使用すると、ユーザーは特定のスライドに直接ジャンプできます。

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 要素を使用して、スライドにキャプションを追加できます。以下に示すように、オプションのdisplay utilitiesを使用して、小さいビューポートで簡単に非表示にできます。.d-none で最初に非表示にし、.d-md-block で中サイズのデバイスで表示します。

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に .carousel-fade を追加すると、スライドの代わりにフェードトランジションでスライドをアニメーション化します。carouselのコンテンツ（例：テキストのみのスライド）によっては、適切なクロスフェードのために .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>

自動再生carousel

ride オプションを carousel に設定することで、ページ読み込み時にcarouselを自動再生させることができます。自動再生carouselは、マウスでホバーしている間は自動的に一時停止します。この動作は pause オプションで制御できます。Page Visibility APIをサポートするブラウザでは、Webページがユーザーに表示されていない場合（ブラウザタブが非アクティブの場合、またはブラウザウィンドウが最小化されている場合など）、carouselはサイクルを停止します。

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

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

ride オプションが carousel ではなく true に設定されている場合、carouselはページ読み込み時に自動的にサイクルを開始しません。代わりに、最初のユーザーインタラクション後にのみ開始します。

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

コントロールなしの自動再生carousel

スライドのみのcarouselです。ブラウザのデフォルトの画像配置を防ぐために、carousel画像に .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>

タッチスワイプの無効化

carouselは、タッチスクリーンデバイスで左右にスワイプしてスライド間を移動することをサポートしています。これは、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 を追加します。コントロールは、filter CSSプロパティを使用してデフォルトの白い塗りつぶしと比較して反転されます。キャプションとコントロールには、color と background-color をカスタマイズする追加のSass変数があります。

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

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変数、またはコンパイル済みのCSSを使用している場合はカスタムスタイルで変更できます。複数のトランジションが適用されている場合は、transformトランジションを最初に定義してください（例: transition: transform 2s ease, opacity .5s ease-out）。

CSS

Sass変数

すべてのcarouselの変数:

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

dark carouselの変数:

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

使用方法

データ属性による使用

データ属性を使用して、carouselの位置を簡単に制御します。data-bs-slide は、現在の位置に対してスライド位置を変更するキーワード prev または next を受け入れます。または、data-bs-slide-to を使用して、carouselに生のスライドインデックス data-bs-slide-to="2" を渡すと、スライド位置が 0 から始まる特定のインデックスにシフトします。

JavaScriptによる使用

手動でcarouselを呼び出します:

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

オプション

オプションはdata属性またはJavaScriptを介して渡すことができます。data-bs-にオプション名を追加できます。例: data-bs-animation="{value}"。data属性を介してオプションを渡す場合は、オプション名の大文字小文字を"camelCase"から"kebab-case"に変更してください。例えば、data-bs-customClass="beautifier"の代わりにdata-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント設定を格納できる実験的な予約済みdata属性data-bs-configをサポートしています。要素にdata-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、最終的なtitle値は456になり、個別のdata属性はdata-bs-configで指定された値を上書きします。さらに、既存のdata属性はdata-bs-delay='{"show":0,"hide":150}'のようなJSON値を格納できます。

最終的な設定オブジェクトは、data-bs-config、data-bs-、およびjs objectのマージされた結果であり、最後に指定されたキー値が他の値を上書きします。

名前型デフォルト説明
intervalnumber5000アイテムを自動的にサイクルするまでの遅延時間。
keyboardbooleantruecarouselがキーボードイベントに反応するかどうか。
pausestring, boolean"hover""hover" に設定すると、mouseenter でcarouselのサイクルを一時停止し、mouseleave でcarouselのサイクルを再開します。false に設定すると、carouselにホバーしても一時停止しません。タッチ対応デバイスでは、"hover" に設定すると、サイクルは touchend（ユーザーがcarouselとのインタラクションを終了したとき）で2つの間隔の間一時停止してから、自動的に再開します。これはマウスの動作に追加されます。
ridestring, booleanfalsetrue に設定すると、ユーザーが最初のアイテムを手動でサイクルした後にcarouselを自動再生します。"carousel" に設定すると、読み込み時にcarouselを自動再生します。
touchbooleantruecarouselがタッチスクリーンデバイスで左右のスワイプインタラクションをサポートするかどうか。
wrapbooleantruecarouselが継続的にサイクルするか、ハードストップを持つか。

メソッド

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

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

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

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
メソッド説明
cyclecarouselアイテムを左から右にサイクルし始めます。
dispose要素のcarouselを破棄します（DOM要素に保存されたデータを削除します）。
getInstanceDOM要素に関連付けられたcarouselインスタンスを取得できる静的メソッドです。次のように使用できます: bootstrap.Carousel.getInstance(element)。
getOrCreateInstanceDOM要素に関連付けられたcarouselインスタンスを返すか、初期化されていない場合は新しいインスタンスを作成する静的メソッドです。次のように使用できます: bootstrap.Carousel.getOrCreateInstance(element)。
next次のアイテムにサイクルします。次のアイテムが表示される前に呼び出し元に戻ります（例: slid.bs.carousel イベントが発生する前）。
nextWhenVisibleページ、carousel、またはcarouselの親が表示されていない場合、carouselを次にサイクルしません。ターゲットアイテムが表示される前に呼び出し元に戻ります。
pausecarouselがアイテムをサイクルするのを停止します。
prev前のアイテムにサイクルします。前のアイテムが表示される前に呼び出し元に戻ります（例: slid.bs.carousel イベントが発生する前）。
tocarouselを特定のフレーム（配列と同様に0ベース）にサイクルします。ターゲットアイテムが表示される前に呼び出し元に戻ります（例: slid.bs.carousel イベントが発生する前）。

イベント

Bootstrapのcarouselクラスは、carousel機能にフックするための2つのイベントを公開しています。両方のイベントには、次の追加プロパティがあります:

  • direction: carouselがスライドする方向（"left" または "right"）。
  • relatedTarget: アクティブなアイテムとして所定の位置にスライドされているDOM要素。
  • from: 現在のアイテムのインデックス
  • to: 次のアイテムのインデックス

すべてのcarouselイベントは、carousel自体（つまり、<div class="carousel">）で発火します。

イベントタイプ説明
slid.bs.carouselcarouselがスライドトランジションを完了したときに発火します。
slide.bs.carouselslide インスタンスメソッドが呼び出されたときにすぐに発火します。
const myCarousel = document.getElementById('myCarousel')

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