ぷにおちゃん～ Bootstrap 3で画像のカルーセル機能を試して見る

はじめに

当サイトでも使用しているBootstap 3は、ウエブデザインに必要不可欠な要素になっています。今回は、Bootsrap 3のJavaScriptを使った画像のカルーセル機能を試してみます。

前提条件

作業の前提条件は、下記のとおりです。

ソフトウエア	バージョン
OS	Windows 7 Ultimate 32bit
Cygwin	Setup Version 2.831

Carouselの使用方法

Bootstrapの設定

bootstrap.min.cssとbootstrap.min.jsを指定します。

<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.min.js"></script>

Carouselの設定

下のサンプルを見てもらえれば解かりますが、Carouselは４つのクラスで構成されています。

クラス	機能
carousel	IDを指定してカルーセルを定義します。指定するIDは、他のクラスで使用されます。
carousel-indicators	表示する画像のインデックスを定義します。インデックスはゼロから始まります。
carousel-inner	画像を定義します。画像には、carousel-captionクラスを使って説明文を指定することができます。
carousel-control	表示した画像を左右に移動するコントローラーを定義します。

<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- インジケータの定義 -->
  <ol class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
  </ol>

  <!-- 画像の定義 -->
  <div class="carousel-inner">
    <div class="item active">
      <img class="img-responsive" src="..." alt="">
      <div class="carousel-caption">
        <h3>...</h3>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="..." alt="">
      <div class="carousel-caption">
        <h3>...</h3>
      </div>
    </div>
  </div>

  <!-- 画像を左右に移動するコントローラーの定義 -->
  <a class="left carousel-control" href="#demo" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#demo" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

サンプル

８枚の画像を、２つのカルーセルを使って表示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>023</title>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
      <div class="container"></div>
    </header>

    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6">
          <div id="demo1" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#demo1" data-slide-to="0" class="active"></li>
              <li data-target="#demo1" data-slide-to="1"></li>
              <li data-target="#demo1" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <img class="img-responsive" src="img/023-01.png" alt="">
                <div class="carousel-caption">
                  <h3>#01</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-02.png" alt="">
                <div class="carousel-caption">
                  <h3>#02</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-03.png" alt="">
                <div class="carousel-caption">
                  <h3>#03</h3>
                </div>
              </div>
            </div>

            <a class="left carousel-control" href="#demo1" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#demo1" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div><!-- demo1 -->
        </div><!-- col-6 -->

        <div class="col-xs-6 col-sm-6 col-md-6">
          <div id="demo2" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#demo2" data-slide-to="0" class="active"></li>
              <li data-target="#demo2" data-slide-to="1"></li>
              <li data-target="#demo2" data-slide-to="2"></li>
              <li data-target="#demo2" data-slide-to="3"></li>
              <li data-target="#demo2" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner">
              <div class="item active">
                <img class="img-responsive" src="img/023-04.png" alt="">
                <div class="carousel-caption">
                  <h3>#04</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-05.png" alt="">
                <div class="carousel-caption">
                  <h3>#05</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-06.png" alt="">
                <div class="carousel-caption">
                  <h3>#06</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-07.png" alt="">
                <div class="carousel-caption">
                  <h3>#07</h3>
                </div>
              </div>
              <div class="item">
                <img class="img-responsive" src="img/023-08.png" alt="">
                <div class="carousel-caption">
                  <h3>#08</h3>
                </div>
              </div>
            </div>

            <a class="left carousel-control" href="#demo2" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#demo2" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
            </a>
          </div>

        </div><!-- col-6 -->
      </div><!-- row -->
    </div><!-- container -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>

ページを表示すると、２組の画像がカルーセル表示されます。

デモは、023.htmlからご覧頂けます。

ファイルは、023.zipからダウンロードできます。

Table of Contents

Bootstrap 3で画像のカルーセル機能を試して見る

はじめに

前提条件

Carouselの使用方法