カルーセル(Carousel) v5.0.0-beta1設定変更
カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。
使い方(How it works)
カルーセルは、一連のコンテンツを循環するためのスライドショーで、CSS 3D変換とJavaScriptのビットで構築されている。一連のイメージ、テキスト、カスタムマークアップで動作。また、前後のコントロールとインジケータのサポートも組み込まれている。
Page Visibility APIがサポートされているブラウザでは、ブラウザのタブが非アクティブな場合、ブラウザのウィンドウが最小化されている場合など、ウェブページがユーザーに表示されていない場合は循環しない。
prefers-reduced-motion
メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。
入れ子になったカルーセルはサポートされておらず、カルーセルは一般にアクセシビリティ基準に準拠していないので注意。
カルーセルの設定(Examples)v5.0.0-beta1設定変更
カルーセルは自動的にスライド寸法を正規化しない。従って、適切なサイズのコンテンツを作成するには、追加のユーティリティやカスタムスタイルを使用する必要がある。カルーセルは前/次のコントロールとインジケータをサポートしているが、明示的に必要とされているわけではない。自分で適切と思うように追加してカスタマイズするように。
.active
クラスを必ずスライドの1つに追加して下さい。そうしないと、カルーセルは表示されない。また、特に1つのページで複数のカルーセルを使用する場合は、オプションのコントロールの .carousel
に一意の id
を設定して下さい。コントロール要素とインジケータ要素には、.carousel
要素の id
と一致する data-bs-target
属性(リンクの場合は href
)が必要。
スライドのみ(Slides only)
ここではスライドのみのカルーセルを表示。ブラウザのデフォルトのイメージの配置を防ぐために、カルーセルのイメージ上に .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 src="..." alt="第1スライド" class="d-block w-100">
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img src="..." alt="第2スライド" class="d-block w-100">
</div><!-- /.carousel-item -->
<div class="carousel-item">
<img src="..." alt="第3スライド" class="d-block w-100">
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
</div><!-- /.carousel -->
【設定】
div#ID.carousel.slide
>div.carousel-inner
>div.carousel-item
>img.d-block.w-100
div.carousel-item
に.active
を入れるとそのアイテムが最初に表示される(div.carousel-item.active
は必ずどれかに設定すること).carousel
にdata-bs-ride="carousel"
を入れると読み込み時から循環が開始
【変更履歴】
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-ride="carousel"]
⇒[data-bs-ride="carousel"]
コントロール付き(With controls)v5.0.0-beta2設定変更
前と次のコントロールを追加。<button>
要素の使用を推奨するが、<a>
要素と role="button"
の併用での使用もできる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<!-- スライドさせる画像の設定 -->
<div class="carousel-inner">
...
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<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><!-- /.carousel -->
※Bootstrap4.xの設定例 赤背景が変更箇所
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
...
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">次へ</span>
</a>
</div>
【設定】
div#ID.carousel.slide
> [div.carousel-inner
・・・]《スライド画像》 + {[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
](次へ)}《スライドコントロール》
【アクセシビリティの設定】
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-only
⇒span.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]
- スライドコントロール:
インジケータ付き(With indicators)v5.0.0-beta2設定変更
インジケータは、コントロールと並んでカルーセルに追加できる。
見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="false">
<!-- インジケータの設定 -->
<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><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<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><!-- /.carousel -->
※Bootstrap4.xの設定例 赤背景が変更箇所
<div id="carouselExampleIndicators" class="carousel slide" data-ride="false">
<!-- インジケータの設定 -->
<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><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
<div class="carousel-item">
...
</div><!-- /.carousel-item -->
</div><!-- /.carousel-inner -->
<!-- スライドコントロールの設定 -->
<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><!-- /.carousel -->
【設定】
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>
- アクセシビリティの設定を追加
キャプション付き(With captions)
.carousel-item
内の .carousel-caption
要素を使用して、スライドに簡単にキャプションが追加できる。以下に示すようにオプションの表示ユーティリティを使用して、小のビューポートで簡単に非表示ができる。最初は .d-none
で非表示にし、.d-md-block
で中のビューポート以上で表示に戻す。
見本
設定例
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="true">
<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" data-bs-ride="carousel">
<!-- インジケータの設定 -->
<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" data-bs-ride="carousel">
<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-only
⇒span.visually-hidden
)
- スライドコントロールの設定変更(
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加
- 【v5.0.0-beta2】
- スライドコントロールの設定変更(
a.carousel-control-{prev|next}-icon
⇒button.carousel-control-{prev|next}-icon
)
- スライドコントロールの設定変更(
個別の .carousel-item
間隔(Individual .carousel-item
interval)v5.0.0-alpha2設定変更
.carousel-item
に data-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-only
⇒span.visually-hidden
)
- スライドコントロールの設定変更(
- 【v5.0.0-beta1】
data-
属性に名前空間bs-
を追加[data-interval="数値"]
⇒[data-bs-interval="数値"]
- 【v5.0.0-beta2】
- スライドコントロールの設定変更(
a.carousel-control-{prev|next}-icon
⇒button.carousel-control-{prev|next}-icon
)
- スライドコントロールの設定変更(
タッチスワイプを無効にする(Disable touch swiping)v5.0.0-beta2新設(v4.6.0でバックポート)
カルーセルでは、タッチスクリーンデバイスを左右にスワイプしてスライド間の移動をサポートしている。これは、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="..." 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>
【設定】
.carousel.slide
にdata-bs-touch="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>
縦スライド
See the Pen News ticker on Bootstrap5 carousel (vertical slide) by cccabinet (@cccabinet) on CodePen.
【変更履歴】
- 【v5.0.0-alpha1】
- 外部CSSの設定からできるだけBootstrapのユーティリティクラスを使用するように変更
- 【v5.2.0】
.bg-info.text-dark
⇒.text-bg-info
(従来のままでも動作に変更なし)
ダーク・バージョン(Dark variant)v5.0.0-alpha2新設
.carousel-dark
を .carousel
に追加して、コントロール、インジケーター、キャプションを暗くする。コントロールは、filter
CSSプロパティを使用して、デフォルトの白から反転。キャプションとコントロールには、color
と background-color
をカスタマイズする追加のSass変数あり。
見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
...
</div>
【設定】
.carousel
に.carousel-dark
を追加
任意の遷移(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`)
$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
を使用して、スライドの位置を 0
から始まる特定のインデックスにシフトして、カルーセルの未処理のスライドインデックスを data-bs-slide-to="2"
に渡す。
data-bs-ride="carousel"
属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用。カルーセルを初期化するために data-bs-ride="carousel"
を使わないのなら、自分で初期化しなければならない。同じカルーセルの(余分で不要な)明示的なJavaScriptの初期化と組み合わせて使用はできない。
JavaScript経由で(Via JavaScript)v5.2.0設定変更
手動でカルーセルを呼び出す:
Bootstrap5.2.0の設定例 緑背景が変更箇所
JavaScriptconst carousel = new bootstrap.Carousel('#myCarousel')
※Bootstrap5.1.3の設定例 赤背景が変更箇所
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.0.0-beta2一部変更
オプションは、データ属性かJavaScriptを使用して渡される。データ属性の場合、data-bs-animation=""
のように、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 |
number | 5000 |
アイテムを自動的に循環させるまでの遅延時間(1000分の1秒単位)。false の場合、カルーセルは自動的に循環しない。 |
keyboard |
boolean | true |
カルーセルが、キーボードのイベントに反応すべきかどうか指定true :有効/false :無効 |
pause |
string | boolean | 'hover' |
タッチ対応デバイスでは、 |
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
に戻す
メソッド(Methods)v5.0.0-alpha1設定変更、一部変更、v5.0.2メソッド追加
非同期メソッドと遷移
すべてのAPIメソッドは、非同期で遷移を開始する。それらは移行が始まるとすぐに呼び出し元に戻るが、終了する前に呼び出し元に戻る。さらに、遷移コンポーネントのメソッド呼び出しは無視される。
詳細については、Javascriptのドキュメントに記載。
例えば、カルーセル・コンストラクタを使用してカルーセル・インスタンスを作成し、追加のオプションで初期化してアイテムの循環を開始できる。
Bootstrap5.2.0の設定例 緑背景が変更箇所
JavaScriptconst myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
wrap: false
})
※Bootstrap5.1.3の設定例 赤背景が変更箇所
JavaScriptvar myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
※Bootstrap4.xの設定例
JavaScript$('#myCarousel').carousel({
interval: 2000,
wrap: 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 => {
// 何かをする...
})