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">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 のようにします。

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

`.carousel(options)`

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

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

`.carousel('cycle')`

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

`.carousel('pause')`

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

`.carousel(number)`

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs). 特定のアイテムにスライドします。

`.carousel('prev')`

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

`.carousel('next')`

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

`.carousel('dispose')`

アイテムを破棄します。

Events

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

direction: スライドされる方向
relatedTarget: アクティブなアイテムとして配置するDOM要素
from: 現在のアイテムのindex
to: 次のアイテムのindex

Event Type	Description
slide.bs.carousel	This event fires immediately when the `slide` instance method is invoked.
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Change transition duration

The transition duration of .carousel-item can be changed with the $carousel-transition 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).

Change transition duration

.carousel-item はコンパイル前の $carousel-transition で変更することもできます。