Carousel

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

How it works

カルーセルはコンテンツを繰り返し表示するするためのスライドショーです。 CSS 3D と JavaScriptで構築するされている。
前後(previous/next)のコントロールもサポートされています。 Page Visibility API がサポートされているブラウザでは, ブラウザのタブがアクティブではない場合やウィンドウが最小化されいる場合など, ページが表示されていない場合はカルーセルは動きません。またネストされたカルーセルはサポートされていません。 ソースからjavaScriptを構築す流場合は util.js が必要です。

Example

カルーセルは自動的にスライドのサイズを正規化しません。 ユーティリティやカスタムスタイルでコンテンツのサイズを適切にする必要があります。　　 前後(previous/next)のコントロールはサポートされているが, 明示的に必要とされているわけではないので, 適切と思うようにカスタマイズや追加してください。　　

** スライドの中に .active クラスが1つ必要です。ない場合は表示されません。　　 複数のカルーセルを1つのページで使う場合には, .carousel にユニークなIDを付与する必要があります。コントロール要素とインジケータ要素には .carousel 要素のIDと一致する data-target属性（リンクの場合は href ）が必要です。　　

Slides only

＃＃スライドのみ(Slides only) スライドのみのカルーセルを表示します。
ブラウザのデフォルトのイメージの配置を防ぐために, カルーセルのイメージ上に .d-block と .w-100 が存在することに注意します。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
</div>

With controls

前後(previous/next)のコントロールを追加します。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </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">Previous</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">Next</span>
  </a>
</div>

With indicators

インジケータをカルーセルに追加可能です。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <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">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

With captions

.carousel-item に .carousel-caption を適用して, スライドにキャプションが追加できます。
display utilities を使用して viewport に対して非表示にできます。
.d-none .d-md-block のようにします。

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

.carousel-fade を適用すると, スライドをアニメーションで切り替えます。

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Usage

データ属性を使用して, カルーセルの位置をコントロールできます。 data-slide は prev, next を受け取り, スライドの現在の位置からの相対的な位置が変更されます。
または data-slide-to を使用して, スライドの位置を 0 から始まる特定のインデックスにシフトします。

data-ride="carousel" 属性は, ページの読み込み時にカルーセルをアニメーションとするために使用します。

Via JavaScript

マニュアルでカルーセルを呼びます。

$('.carousel').carousel()

Options

オプションは, データの属性やJavaScriptを使用して渡すことが可能です。 data- にオプション名を追加します。( data-interval="" のように)

Name Type Default Description
interval number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboard boolean true Whether the carousel should react to keyboard events.
pause string | boolean "hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
ride string false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.
touch boolean true Whether the carousel should support left/right swipe interactions on touchscreen devices.

Methods

Asynchronous methods and transitions

すべての API メソッドは非同期であり, 遷移を開始します。 これらは遷移が始まってすぐ, それが終わる前に return されます。 加えて, 遷移中のコンポーネントから呼ばれたメソッドは無視されます。

See our JavaScript documentation for more information.

.carousel(options)

object オプションを使用してアイテムのスライドを開始します。

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

左から右にアイテムがスライドします。

.carousel('pause')

アイテムのスライドを停止します。

.carousel(number)

特定のフレーム（0を起点, 配列と同様）のアイテムにスライドします。**ターゲットのアイテムが表示される前に（すなわち slid.bs.carousel イベントが生じる前に） return されます。

.carousel('prev')

前のアイテムにスライドします。

.carousel('next')

次のアイテムにスライドします。

.carousel('dispose')

アイテムを破棄します。

Events

カルーセルの機能を操作するための2つのイベントがあります。

  • direction: スライドされる方向
  • relatedTarget: アクティブなアイテムとして配置するDOM要素
  • from: 現在のアイテムのindex
  • to: 次のアイテムのindex
Event Type Description
slide.bs.carousel このイベントは slide インスタンスメソッドが開始したときに直ちに発火します。
slid.bs.carousel このイベントはカルーセルがスライドを完了したときに発火します。 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Change transition duration

.carousel-item の遷移にかかる時間は, コンパイル前の Sass 変数 $carousel-transition の値によって変更できます。 コンパイルされた CSS を用いている場合には, カスタムスタイルを利用することもできます。 複数の transition が定義されている場合は, transform transition が先に定義されていることを確認してください。(eg. transition: transform 2s ease, opacity .5s ease-out)。

v4.3