Bootstrap3 カルーセルとCarousel.jsの簡単な使い方

Pocket

Carouselはコンテンツをスライド表示させるコンポーネントです。画像を入れることでサイトのトップページにスライダーとして使用することができます。ただ、そのまま使うとちょっとぎこちないというか、いかにもプロトタイプ的なものになってしまうため、スタイルやJavascriptを使ってカスタマイズしてあげる必要があります。

ここではBootstrap3のCarouselの基本的な使い方から、Javascriptの使い方までを一通りまとめてみました。

Bootstrap3 Carouselの使い方

Carouselは公式ドキュメントのテンプレートをコピペして画像を入れるだけで使えます。Carouselのトランジション(スライドアニメーション)はIE8と9でサポートされていないので注意が必要です。

Class名 概要
.carousel.slide カルーセルコンポーネント
data-ride="carousel" 自動的にスライドさせるデータ属性
.carousel-indicators 下部に表示される丸いボタン
.carousel-inner スライドの中身
.item スライドコンテンツ
.item.active 現在表示されているスライド
.carousel-control 左右に表示される矢印ボタン。
<!-- 
  data-ride="carousel"を入れることで自動的にスライドが開始される
-->
<div id="carousel_sample" class="carousel slide" data-ride="carousel">

  <!-- 中央に表示される丸いボタン -->
  <ol class="carousel-indicators">
    <!-- 
      Carouselのid名を合わせる、スライダーの数だけ用意する
      data-slide-toで何番目のスライドへ移動するか指定、0から始めるので1つめのスライドなら0を指定
    -->
    <li data-target="#carousel_sample" data-slide-to="0" class="active"></li>
    <li data-target="#carousel_sample" data-slide-to="1" class=""></li>
    <li data-target="#carousel_sample" data-slide-to="2" class=""></li>

  </ol>

  <!-- ここからCarouselの中身 -->
  <div class="carousel-inner">

    <!-- item = 1スライド、activeを入れたところが最初に表示される -->
    <div class="item active">
      <img src="#" alt="First slide">
    </div>
    <div class="item">
      <img src="#" alt="Second slide">
    </div>
    <div class="item">
      <img src="#" alt="Third slide">
    </div>

  </div>

  <!-- ページ送りボタン、ここもCarouselのid名を合わせる -->
  <a class="left carousel-control" href="#carousel_sample" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel_sample" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

デモページはこちら

Carouselにキャプションを入れる方法

Carouselにキャプションを追加するには.carousel-captionimgタグの下に入れればOK。

Class名 概要
.carousel-caption キャプションを表示
<div class="item active">
  <img src="..." alt="...">

  <!-- 画像の下に入れる -->
  <div class="carousel-caption">
    <h3>キャプションタイトル</h3>
    キャプションテキスト
  </div>

</div>

デモページはこちら

Carousel.jsの使い方

Carouselの設定オプション

Carouselのスライドスピードや、最後のスライドまで到達した後循環させるかどうかなどの設定が出来ます。このオプションはJavascriptだけでなく、コンポーネントのデータ属性からも同様の設定が可能です。

option名 概要
interval スライドのスピード
pause hoverにしている場合はマウスオーバーでカルーセルが止まる
wrap カルーセルを循環させるかどうか
keyboard キーボードイベントに反応するかどうか
// javascriptで設定
$('.carousel').carousel({
  interval: 5000,
  pause: "hover",
  wrap: true,
  keybord: true
});
<!-- データ属性でオプション設定 -->
<div id="carousel_sample" class="carousel slide" data-interval="2500">

Carouselを操作するコマンド

Carousel.jsではオプションの他にスライドを操作するメソッドが用意されています。この機能を使うことで、再生・停止ボタンと言った操作機能を作ることが可能です。

function名 概要
.carousel(‘cycle’) サイクルさせる
.carousel(‘pause’) サイクルストップ
.carousel(number) 指定したインデックスのスライド表示
.carousel(‘prev’) 前のページを表示
.carousel(‘next’) 次のページを表示
// 再生ボタン
$('.play-btn').click(function () {
  $('#carousel-js-sample').carousel('cycle');
});
// 停止ボタン
$('.stop-btn').click(function () {
  $('#carousel-js-sample').carousel('pause');
});

また、各動作ごとにイベントハンドラも用意されています。スライドが始まった時、完了した時に使えます。キャプションはフェードインさせた方が見た目もクールになるのでぜひ使ってみてください。

function名 概要
slide.bs.carousel スライドが呼び出されたら発動
slid.bs.carousel スライドが完了したら発動
// スライド開始したら発動
$('#carousel-js-sample').on('slide.bs.carousel', function () {
  // キャプションを隠す
  $('#carousel-js-sample .carousel-caption').hide();
});
// スライドが停止したら発動
$('#carousel-js-sample').on('slid.bs.carousel', function () {
  // キャプションをフェードインさせる
  $('#carousel-js-sample .carousel-caption').fadeIn();
});

デモページはこちら