twitter-bootstrap
カルーセル

備考

HTMLの基本的な使い方

ブートストラップカルーセルは、カルーセル内の要素を循環するスライドショーを作成するブートストラップコンポーネントです。

基本的なHTMLの使用例を次に示します。

<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>

基本的なJavaScriptの使用と初期化

カルーセルコンポーネントは、関数$('.carousel').carousel(options)を使用してjQueryによってインスタンス化することができます$('.carousel').carousel(options) $('.carousel')は特定カルーセルのトップレベル参照で、 optionsはカルーセルデフォルトの属性。

optionsオブジェクトを使用すると、カルーセルの動作に影響を与える複数のプロパティを定義できoptions 。これらのプロパティは次のように定義されます。

• intervalプロパティはJavascriptのnumber型を受け取ります。これにより、ユーザーはカルーセルが所定のカルーセルスライドを表示する時間を定義できます。ブール値falseが指定されている場合、カルーセルは自動的に循環しません。
• pauseプロパティは、ユーザーのマウスがカルーセルに入ったときにカルーセルの自動サイクリングが一時停止する動作をトグルするJavascript string型を受け入れます。受け入れられるデフォルトの（そして唯一の）値は "ホバー"です。
• wrapプロパティはJavascript boolean型を受け取ります。これにより、ユーザーは、カルノーセルが所定のスライド上で停止することなく連続的に循環するかどうかを定義することができます。
• keyboardプロパティはJavascriptのboolean型を受け取ります。これにより、カルーセルをキーボードイベントに応答させるかどうかをユーザーが定義できます。

次に、基本的なJavaScriptの使用例を示します。

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

他のブートストラップコンポーネントと同様に、カルーセルのオプションはデータ属性を介してHTMLで指定することもできます。