メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

カルーセル(Carousel) v5.0.0設定変更

カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。

使い方(How it works)

  • カルーセルは、一連のコンテンツを循環するためのスライドショーで、CSS 3D変換とJavaScriptのビットで構築されている。一連のイメージ、テキスト、カスタムマークアップで動作。また、前後のコントロールとインジケータのサポートも組み込まれている。
  • パフォーマンス上の理由から、カルーセルはカルーセル・コンストラクタ・メソッドを使用して手動で初期化する必要がある。初期化しない場合、イベントリスナーの一部(特にタッチ/スワイプサポートを必要とするイベント)は、ユーザーが明示的にコントロールまたはインジケータをアクティブにするまで登録されない。
    唯一の例外は data-bs-ride="carousel" 属性を持つカルーセルの自動再生で、これはページロード時に自動的に初期化されるため。データ属性を持つ自動再生カルーセルを使用する場合、コンストラクタ・メソッドで同じカルーセルを明示的に初期化しないこと。
  • 入れ子になったカルーセルはサポートしていない。また一般的にカルーセルはユーザビリティやアクセシビリティの問題を引き起こすことが多いので注意が必要。

基本の設定(Basic examples)v5.3.0再構成

ここでは、3つのスライドを持つカルーセルの基本的な例を示す。前/次のコントロールにご注意下さい。<button> 要素の使用を推奨するが、role="button"<a> 要素の使用も可能。

前と次のコントロールを追加。<button> 要素の使用を推奨するが、<a> 要素と role="button" の併用での使用もできる。

見本手動でスライドさせて下さい
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleControls" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="第1スライド">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="第2スライド">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="第3スライド">
    </div>
  </div>
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </button>
</div>
※Bootstrap4.6.0の設定例 赤背景が変更箇所
<div id="carouselExampleControls" class="carousel slide">
  <div class="carousel-inner">
    ...
  </div>
  <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">前へ</span>
  </a>
  <a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">次へ</span>
  </a>
</div>

カルーセルは自動的にスライド寸法を正規化しない。従って、適切なサイズのコンテンツを作成するには、追加のユーティリティやカスタムスタイルを使用する必要がある。カルーセルは前/次のコントロールとインジケータをサポートしているが、これらは明示的に必須ではない。お好みで追加やカスタマイズして下さい。

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

【設定】
  • div#ID.carousel.slide > [div.carousel-inner > div.carousel-inner > div.carousel-item > img.d-block.w-100]《スライド画像》 + {[button.carousel-control-prev[data-bs-target="#ID"][data-bs-slide="prev"] > span.carousel-control-prev-icon](前へ) + [button.carousel-control-next[data-bs-target="#ID"][data-bs-slide="next"] > span.icon-next](次へ)}《スライドコントロール》
  • div.carousel-item.active を入れるとそのアイテムが最初に表示される(div.carousel-item.active は必ずどれかに設定すること)
【注意】
  • 基本の設定では [data-bs-ride] を外し、手動でスライドさせる仕様にしている(アクセシビリティの観点から、自動再生カルーセルの使用の回避を推奨)
アクセシビリティの設定】
  • button.carousel-control-{prev|next}(2ヶ所)に、
    • span.carousel-control-{prev|next}-icon(2ヶ所)に 、aria-hidden="true" 属性(スクリーンリーダー等での読み上げをスキップさせる)
    • 「前へ」と「次へ」を意味する span.visually-hidden(スクリーンリーダー等での読み上げをスキップさせる)
    をそれぞれ入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • span.sr-onlyspan.visually-hidden
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-ride="carousel"][data-bs-ride="carousel"]
      • [data-slide="prev"][data-bs-slide="prev"]
      • [data-slide="next"][data-bs-slide="next"]
  • 【v5.0.0-beta2】(4.6.1でバックポート)
    • スライドコントロール:a.carousel-control-{prev|next}-icon[href="#ID" role="button" data-bs-slide]button[type="button"].carousel-control-{prev|next}-icon [data-bs-target="#ID" data-bs-slide]

インジケータ(Indicators)v5.0.0-beta2設定変更

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

見本手動でスライドさせて下さい
Bootstrap5.xの設定例 緑背景が変更箇所
<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="スライド 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="スライド 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="スライド 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      ...
    </div>
    <div class="carousel-item">
      ...
    </div>
    <div class="carousel-item">
      ...
    </div>
  </div>
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    ...
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    ...
  </button>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div id="carouselExampleIndicators" class="carousel slide">
  <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">
      ...
    </div>
    <div class="carousel-item">
      ...
    </div>
    <div class="carousel-item">
      ...
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    ...
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    ...
  </a>
</div>
【設定】
  • div#ID.carousel.slide > {div.carousel-indicators" > [button[data-bs-target="#ID"][data-bs-slide-to="*"] ...]}《インジケータ》 + [div.carousel-inner ...]《スライド画像》 + {[button.carousel-control-prev ...] + [button.carousel-control-next ...]}《スライドコントロール》
  • <button>div.carousel-item の2ヶ所に .active を入れるとそのアイテムが最初に表示される
  • data-bs-slide-to="*"0 から順につける
アクセシビリティの設定】
  • button.active と同じ要素に aria-current="true"(支援技術に現在のアイテムだと伝える)を入れる
  • インジケータとなる <button> に、aria-label 属性(インジケータボタンのラベリング)を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-ride="carousel"][data-bs-ride="carousel"]
      • [data-slide-to="*"][data-bs-slide-to="*"]
      • [data-slide="prev"][data-bs-slide="prev"]
      • [data-slide="next"][data-bs-slide="next"]
  • 【v5.0.0-beta2】
    • ol.carousel-indicators > <li>div.carousel-indicators > <button>
    • アクセシビリティの設定を追加

キャプション(Captions)

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

見本手動でスライドさせて下さい
設定例
<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    ...
  </div>
  <!-- スライドさせる画像の設定 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="第1スライド" class="d-block w-100">
      <div class="carousel-caption d-none d-md-block">
        <h5>第1スライド ラベル</h5>
        <p>1番目のスライドの代表的なプレースホルダコンテンツ。</p>
      </div><!-- /.carousel-caption -->
    </div><!-- /.carousel-item -->
    ...
  </div><!-- /.carousel-inner -->
  ...
</div>
【設定】
  • div.carousel-item > 〔img.d-block.w-100《画像》 + {.carousel-caption.d-none.d-md-block > [<h5>《タイトル》 + <p>《コンテンツ》]}《キャプション》〕《スライドアイテム》
【注意】
  • .carousel-caption.d-none.d-md-block を追加しているので、モバイル(ビューポートが小以下)ではキャプションは表示されない

上記の設定を全て合わせると次のようになる:

Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselOption1" class="carousel slide">
  <!-- インジケータの設定 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="0" class="active" aria-current="true" aria-label="スライド 1"></button>
    <button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="1" aria-label="スライド 2"></button>
    <button type="button" data-bs-target="#carouselOption1" data-bs-slide-to="2" aria-label="スライド 3"></button>
  </div>
  <!-- スライドさせる画像の設定 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="第1スライド">
      <div class="carousel-caption d-none d-md-block">
        <h5>第1スライド ラベル</h5>
        <p>1番目のスライドの代表的なプレースホルダコンテンツ。</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="第2スライド">
      <div class="carousel-caption d-none d-md-block">
        <h5>第2スライド ラベル</h5>
        <p>2番目のスライドの代表的なプレースホルダコンテンツ。</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="第3スライド">
      <div class="carousel-caption d-none d-md-block">
        <h5>第3スライド ラベル</h5>
        <p>3番目のスライドの代表的なプレースホルダコンテンツ。</p>
      </div>
    </div>
  </div>
  <!-- スライドコントロールの設定 -->
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselOption1" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselOption1" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </button>
</div>

クロスフェード(Crossfade)v5.0.0-alpha2設定変更

カルーセルに .carousel-fade を追加すると、スライドではなくフェード遷移でスライドをアニメーション化する。カルーセルのコンテンツ(テキストのみのスライドなど)によっては、適切なクロスフェードを行うために .carousel-item.bg-body か任意の background-color CSSを追加することを推奨。

見本手動でフェードさせて下さい
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="第1スライド" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="..." alt="第2スライド" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="..." alt="第3スライド" class="d-block w-100">
    </div>
  </div>
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </button>
</div>
【設定】
  • .carousel.slide.carousel-fade を追加
【変更履歴】
  • 【v5.0.0-alpha2】
    • スライドコントロールの設定変更(span.sr-onlyspan.visually-hidden
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
  • 【v5.0.0-beta2】
    • スライドコントロールの設定変更(a.carousel-control-{prev|next}-iconbutton.carousel-control-{prev|next}-icon

カルーセルの自動再生(Autoplaying carousels)v5.3.0新設

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

見本
設定例
<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">前へ</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">次へ</span>
  </button>
</div>

ride オプションが carousel ではなく、true に設定されている場合、カルーセルはページロード時に自動的に循環を開始しない。その代わり最初のユーザーインタラクションの後にのみ開始される。

見本
設定例
<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">前へ</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">次へ</span>
  </button>
</div>

.carousel-itemdata-bs-interval="" を追加すると、自動的に次のアイテムに循環するまでの時間が変更できる。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img class="d-block w-100" src="..." alt="第1スライド">
    </div>
    <div class="carousel-item" data-bs-interval="20000">
      <img class="d-block w-100" src="..." alt="第2スライド">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="第3スライト">
    </div>
  </div>
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </button>
</div>
【設定】
  • .carousel-item[data-bs-interval="数値"](数値は1000分の1秒単位でデフォルトは 5000)を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • スライドコントロールの設定変更(span.sr-onlyspan.visually-hidden
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-interval="数値"][data-bs-interval="数値"]
  • 【v5.0.0-beta2】
    • スライドコントロールの設定変更(a.carousel-control-{prev|next}-iconbutton.carousel-control-{prev|next}-icon

コントロールなしの自動再生カルーセル(Autoplaying carousels without controls)v5.3.0「スライドのみ」から変更

こちらはスライドのみのカルーセル。ブラウザのデフォルトの画像整列を防ぐために、カルーセルの画像に .d-block.w-100 がいるので注意。

見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="第1スライド">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="第2スライド">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="第3スライト">
    </div>
  </div>
</div>

タッチスワイプを無効にする(Disable touch swiping)v5.0.0-beta2新設(v4.6.0でバックポート)、v5.2.0設定変更

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

見本
Bootstrap5.2.0~の設定例
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." alt="..." class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="..." alt="..." class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="..." alt="..." class="d-block w-100">
    </div>
  </div>
  <button type="button" class="carousel-control-prev" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">前へ</span>
  </button>
  <button type="button" class="carousel-control-next" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">次へ</span>
  </buttona>
</div>
※Bootstrap5.1.xの設定例 赤背景が変更箇所
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <div class="carousel-inner">
    ...
  </div>
</div>
【設定】
  • .carousel.slidedata-bs-touch="false" を入れる
【変更履歴】
  • 【v5.2.0】
    • .carouseldata-bs-interval="false" の設定は不可になり削除

カルーセルでニュースティッカー ※裏技、v5.2.0設定変更

横スライド

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carousel-ticker" class="carousel slide text-bg-info" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <p class="lead text-truncate mb-0 p-3">
        <a href="#" class="text-white text-decoration-none">
          <span class="fw-bold">記事の見出し 1</span>:この文章はダミーです。文字の大きさ、量、字間、行間等をご確認下さい。
        </a>
      </p>
    </div>
    <div class="carousel-item">
      <p class="lead text-truncate mb-0 p-3">
        <a href="#" class="text-white text-decoration-none">
           <span class="fw-bold">記事の見出し 2</span>:この文章はダミーです。文字の大きさ、量、字間、行間等をご確認下さい。
        </a>
      </p>
    </div>
    <div class="carousel-item">
      <p class="lead text-truncate mb-0 p-3">
        <a href="#" class="text-white text-decoration-none">
          <span class="fw-bold">記事の見出し 3</span>:この文章はダミーです。文字の大きさ、量、字間、行間等をご確認下さい。
        </a>
      </p>
    </div>
    <div class="carousel-item">
      <p class="lead text-truncate mb-0 p-3">
        <a href="#" class="text-white text-decoration-none">
          <span class="fw-bold">記事の見出し 4</span>:この文章はダミーです。文字の大きさ、量、字間、行間等をご確認下さい。
        </a>
      </p>
    </div>
    <div class="carousel-item">
      <p class="lead text-truncate mb-0 p-3">
        <a href="#" class="text-white text-decoration-none">
          <span class="fw-bold">記事の見出し 5</span>:この文章はダミーです。文字の大きさ、量、字間、行間等をご確認下さい。
        </a>
      </p>
    </div>
  </div>
</div>

縦スライド

参照元

【変更履歴】
  • 【v5.0.0-alpha1】
    • 外部CSSの設定からできるだけBootstrapのユーティリティクラスを使用するように変更
  • 【v5.2.0】
    • .bg-info.text-dark.text-bg-info(従来のままでも動作に変更なし)

ダーク・バージョン(Dark variant)v5.0.0-alpha2新設 v5.3.0非推奨

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

見本手動でスライドさせて下さい
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carouselExampleDark" class="carousel carousel-dark slide">
  ...
</div>
【設定】
  • .carousel.carousel-dark を追加
【変更履歴】
  • 【v5.3.0】
    • カラーモードの新設に伴い .carousel-dark は非推奨に(v5.3.0~でも使用できるがv6で廃止予定)

任意の遷移(Custom transition)v5.0.0-beta3「遷移間隔を変更」から変更

.carousel-item の遷移期間は、コンパイル前の $carousel-transition-duration Sass変数かコンパイル済のCSSを使用している場合は任意のスタイルに変更できる。複数の遷移が適用される場合は、transform 遷移が最初に定義されていることをご確認下さい(例:transition: transform 2s ease, opacity .5s ease-out)。

Sass v5.0.0-beta3追加

変数(Variables)

全てのカルーセルに対応する変数:

デフォルトの設定
scss/_variables.scss 内 carousel-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; // 複数の遷移を使用する場合は、最初に transform 遷移を定義 (例:`transform 2s ease, opacity .5s ease-out`)

Darkカルーセル用の変数:

scss/_variables.scss 内 carousel-dark-variables の設定$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 は、prevnext というキーワードを受け取り、スライドの現在の位置からの相対的な位置が変更される。あるいは、data-bs-slide-to を使用して、スライドの位置を 0 から始まる特定のインデックスにシフトして、カルーセルの未処理のスライドインデックスを data-bs-slide-to="2" に渡す。

JavaScript経由で(Via JavaScript)v5.2.0設定変更

手動でカルーセルを呼び出す:

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst carousel = new bootstrap.Carousel('#myCarousel')
※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
※Bootstrap4.xの設定例
JavaScript$('#myCarousel').carousel()
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの記述をjQueryに依存しない方法に変更
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

オプション(Options)v5.2.0一部変更

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース(単語の先頭を大文字にする)からケバブケース(単語をハイフンでつなぐ)にご変更下さい。例:data-bs-customClass="beautifier" ではなく、data-bs-custom-class="beautifier" を使用する。

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

名前 タイプ デフォルト 説明
interval
v5.2.0一部変更
number 5000 アイテムを自動的に循環させるまでの遅延時間(1000分の1秒単位)。
keyboard boolean true カルーセルが、キーボードのイベントに反応すべきかどうか指定
true:有効/false:無効
pause string | boolean 'hover'

'hover' に設定されている場合は、mouseenter でカルーセルの循環を一時停止し、mouseleave でカルーセルの循環を再開。false に設定した場合、カルーセルの上にカーソルを置いても一時停止しない。

タッチ対応デバイスでは、'hover' に設定すると、循環が自動的に再開する前に、2つの間隔で touchend(ユーザーがカルーセルとのやりとり終了後)で一時停止。これは上記のマウスの動作に加えてある。

ride
v5.0.0-beta2「slide」から再変更
string | boolean false true に設定すると、ユーザーが最初のアイテムを手動で循環させた後、カルーセルが自動再生。'carousel' に設定している場合、読み込み時にカルーセルが自動再生。
touch boolean true カルーセルがタッチスクリーンデバイス上で左右のスワイプ相互作用をサポートするかどうか。
true:有効/false:無効
wrap boolean true カルーセルが、連続的に循環するか強制停止するかどうか。
true:有効/false:無効
【変更履歴】
  • 【v5.0.0-alpha1】
    • ride オプションは slide に名称変更し、タイプに boolean が追加
  • 【v5.0.0-beta2】
    • slide オプションの名称を ride に戻す
  • 【v5.2.0】
    • intervalfalse の設定は不可に

メソッド(Methods)v5.0.0-alpha1設定変更、一部変更、v5.0.2メソッド追加

カルーセル・インスタンスはカルーセル・コンストラクタで作成し、追加のオプションを渡せる。例えば、自動再生するカルーセル(マークアップ自体で data-bs-ride="carousel" 属性を使用していないと仮定)を特定の間隔で、タッチサポートを無効にして手動で初期化するには、以下のようにする:

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})
※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  touch: false
})
※Bootstrap4.xの設定例
JavaScript$('#myCarousel').carousel({
  interval: 2000,
  touch: false
})
メソッド 説明
cycle カルーセルのアイテムを左から右へ循環させ始める。
dispose 要素のカルーセルを破棄(DOM要素に保存されているデータを削除)。
getInstance
v5.0.0-alpha1追加
DOM要素に関連付けられたカルーセル・インスタンスを取得できる静的メソッド。次のように使用可能:bootstrap.Carousel.getInstance(element)
getOrCreateInstance
v5.0.2追加
DOM要素に関連付けられたカルーセル・インスタンスを返すか、初期化されていない場合は新規に作成する静的メソッド。次のように使用可能:bootstrap.Carousel.getOrCreateInstance(element)
next 次のアイテムに循環。次のアイテムが表示される前(つまり、slid.bs.carousel イベントが発生する前)に呼び出し元に戻る。
nextWhenVisible
v5.0.0-alpha1追加
ページ、カルーセル、カルーセルの親要素が表示されていないときに、カルーセルを次に循環させないようにする。ターゲットアイテムが表示される前に呼び出し元に戻る。
pause カルーセルのアイテムの循環を停止。
prev 前のアイテムに循環。前のアイテムが表示される前(つまり、slid.bs.carousel イベントが発生する前)に呼び出し元に戻る。
to
v5.0.0-alpha1「number」から変更
カルーセルを特定のフレームに循環させる(配列と同様に0から数える)。ターゲットアイテムが表示される前(つまり、slid.bs.carousel イベントが発生する前)に呼び出し元に戻る。
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().carousel('xxx')carousel.xxx()
    • nextWhenVisible, getInstance メソッドが追加
    • number メソッドは、to に名称変更
  • 【v5.0.2】
    • getOrCreateInstance メソッドが追加
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

イベント(Events)

Bootstrapのカルーセルクラスは、カルーセル機能に接続するために2つのイベントを公開する。両方のイベントには、次の追加プロパティがある:

  • direction:カルーセルのスライドされる方向("left""right" のいずれか)
  • relatedTarget:アクティブなアイテムとして配置されているDOM要素
  • from:現在のアイテムのインデックス
  • to:次のアイテムのインデックス

すべてのカルーセルのイベントは、カルーセル自体(すなわち <div class="carousel"> )で発動。

イベントタイプ 説明
slid.bs.carousel カルーセルのスライド遷移が完了すると直ちに発動。
slide.bs.carousel slide のインスタンス・メソッドが呼び出されると直ちに発動。
使用例 v5.2.0設定変更
JavaScriptconst myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // 何かをする...
})