carousel.js

カルーセルのような、要素を循環させて表示するスライドショーのコンポーネントです。 入れ子のカルーセルはサポートしていません。

• 使用例
• 使用方法
• オプション
• メソッド
• イベント

使用例

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

アクセシビリティの問題 カルーセルのコンポーネントは一般的にアクセシビリティ標準に準拠していません。 もし準拠させる必要がある場合は、コンテンツに提供する他のオプションを検討してください。

トランジションのアニメーションは、IE8と9でサポートされていません。
BootstrapはアニメーションにもっぱらCSS3を使用しますが、 IE8と9はそれに必要なCSSプロパティをサポートしていません。 そのため、これらのブラウザを使用する際は、スライドはアニメーションしません。 我々は故意にトランジションに対して、jQueryベースのフォールバックを含めないようにしました。

初回の有効要素が必要 .activeクラスは、スライドの1つに追加される必要があります。 そうしなければ、カルーセルは表示されないでしょう。

任意のキャプションについて

.item内に.carousel-caption要素を置くことで、 簡単にスライドにキャプションを追加することが出来ます。 その中に任意のHTMLを置くだけで、自動的に整列とフォーマットが行われます。

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

使用方法

複数のカルーセル

カルーセルを使用するには、カルーセルの機能プロパティを制御するために、 最も外枠の要素(.carousel)にidが必要になります。 複数のカルーセルを追加する場合、またはカルーセルのidを変更する場合は、 関連する制御要素を更新してください。

data属性を使用

カルーセルの位置を簡単に制御することが出来るdata属性を使用することが出来ます。 data-slideはprevまたはnextのキーワードを受け取り、 これは現在のスライド位置に対しての相対的な位置を入れ替えます。 その代わりにdata-slide-toを使用してdata-slide-to="2"のように、 カルーセルにスライド順のインデックス番号を渡すことも出来ます。 これは0から始まるインデックス番号にスライド位置を移動します。

data-ride="carousel"属性は、カルーセルをページ読み込みと同時にアニメーションを開始するように指示するのに使用されます。 これは、同じカルーセルの明示的なJavaScriptの初期化処理と組み合わせて使用することはできません。(冗長且つ不要)

JavaScriptを使用

カルーセルを手動で呼び出します。

$('.carousel').carousel()

オプション

オプションはdata属性またはJavaScriptを通じて渡すことが可能です。 data属性では、data-interval=""のようにオプション名の前にdata-を追加します。

名前	型	デフォルト	説明
interval	number	5000	自動的に項目が循環する際の遅延時間を指定します。 もしfalseが指定された場合は、カルーセルは自動的に循環しなくなります。
pause	string	"hover"	mouseenter(マウス・カーソルが対象要素の上にある)の際にカルーセルの循環を停止し、 mouseleave(マウス・カーソルが対象要素の上から離れる)の際にカルーセルの循環を再開します。
wrap	boolean	true	カルーセルが連続して循環するか停止するかを指定します。
keyboard	boolean	true	カルーセルがキーボードのイベントに反応する/しないを指定します。

メソッド

.carousel(options)

任意のoptionsを使用してカルーセルを初期化して、各項目の循環を開始します。

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

.carousel('cycle')

カルーセルの項目を左から右に循環します。

.carousel('pause')

項目の循環を停止します。

.carousel(number)

カルーセルを特定の項目のフレームへ移動します。(配列と同様に0始まりです)

.carousel('prev')

カルーセルを前の項目のフレームへ移動します。

.carousel('next')

カルーセルを次の項目のフレームへ移動します。

イベント

Bootstrapのcarouselクラスには、カルーセル機能へのフックのために2つのイベントが用意されています。

どちらのイベントも下記のプロパティを持ちます。

• direction: カルーセルがスライドする方向です。("left"または"right")
• relatedTarget: 有効な項目としてスライドされたDOM要素です。

全てのカルーセルのイベントは、カルーセル自身(すなわち、<div class="carousel">)で発火されます。

イベントの型	説明
slide.bs.carousel	このイベントはslideインスタンスメソッドが実行されると即座に発火されます。
slid.bs.carousel	このイベントは、カルーセルのスライドのトランジションが完了した際に発火されます。

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

 Back to top