カルーセル

カルーセルプラグイン

Carouselプラグインは、スライドショーを実現するコンポーネントです。

ヒント： プラグインは個別に（"carousel.js"ファイルを使用）、またはまとめて（ "bootstrap.js"または "bootstrap.min.js"を使用）組み込むことができます。

注： Internet Explorer 9以前では、カルーセルはサポートされていません（CSS3のトランジションとアニメーションを使用してスライド効果を実現するため）。

スライドショーの作成

次の例は、基本的なスライドショーを作成する方法を示しています。

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

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

    <div class="item">
      <img src="carousel2.jpg">
    </div>

    <div class="item">
      <img src="carousel3.jpg">
    </div>

    <div class="item">
      <img src="carousel4.jpg">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

上記に加え、画像を中央に表示するために <head> 内でCSSスタイルを適用します。

<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 80%;
    margin: auto;
}
</style>

<div>部分:
カルーセルコントロールが正しく機能するためにidを設定する必要があります。
class="carousel" は、この <div> にスライドショーが含まれることを示します。
.slide クラスは、CSSトランジションとアニメーション効果を追加します。この効果を望まない場合は、このクラスを省略してください。
data-ride="carousel" 属性は、ページが読み込まれると即座にカルーセルのアニメーションを開始するようにBootstrapに指示します。

「Indicators」部分:
インジケータは、各スライドの下部にある小さな点です（カルーセルにあるスライドの数、および現在表示されているスライドを示します）。
data-target 属性は、カルーセルのidを指し示します。
data-slide-to 属性は、特定の点をクリックするときに、どのスライドに移動するかを指定します。

「Wrapper for slides」部分:
スライドは、クラス .carousel-inner で <div> に指定されています。
各スライドの内容はクラス .item で <div> に定義されています。テキストまたは画像にすることができます。
.active クラスは、スライドの1つに追加する必要があります。そうしないとカルーセルが見えなくなります。

「Left and right controls」部分：
このコードでは、「左」と「右」のボタンが追加され、ユーザーは手動でスライド間を行き来することができます。
data-slide 属性は、キーワード "prev"または "next"を設定します。

キャプションの追加

それぞれの <div class="item"> 内に <div class="carousel-caption"> を追加して、各スライドのキャプションを作成します。

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="carousel1.jpg">
      <div class="carousel-caption">
        <h3>馬</h3>
        <p>美しい馬です。</p>
      </div>
    </div>

    <div class="item">
      <img src="carousel2.jpg">
      <div class="carousel-caption">
        <h3>孔雀</h3>
        <p>美しい孔雀です。</p>
      </div>
    </div>

    <div class="item">
      <img src="carousel3.jpg">
      <div class="carousel-caption">
        <h3>猿</h3>
        <p>美しい猿です。</p>
      </div>
    </div>

    <div class="item">
      <img src="carousel4.jpg">
      <div class="carousel-caption">
        <h3>とんぼ</h3>
        <p>美しいとんぼです。</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel1" 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="#myCarousel1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>