ブートストラップ-カルーセルプラグイン

Bootstrapカルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。レスポンシブであることに加えて、コンテンツは、画像、iframe、ビデオ、または必要に応じてあらゆる種類のコンテンツを許可するのに十分な柔軟性を備えています。

'_このプラグイン機能を個別に含める場合は、 carousel.js が必要です。または、リンク：/bootstrap/bootstrap_plugins_overview [Bootstrap Plugins Overview]で説明されているように、_bootstrap.js_または縮小された_bootstrap.min.js_を含めることができます。_

例

以下の簡単なスライドショーは、Bootstrapカルーセルプラグインを使用して、カルーセルのような要素を循環するための一般的なコンポーネントを示しています。カルーセルを実装するには、マークアップ付きのコードを追加するだけです。データ属性の必要はなく、単純なクラスベースの開発が必要です。

<div id = "myCarousel" class = "carousel slide">

   <!-- 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>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

</div>

オプションのキャプション

*.item* 内の *.carousel-caption* 要素を使用すると、スライドにキャプションを簡単に追加できます。 そこにオプションのHTMLを配置すると、自動的に配置およびフォーマットされます。 次の例はこれを示しています-

<div id = "myCarousel" class = "carousel slide">

   <!-- 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>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

使用法

データ属性経由-データ属性を使用して、カルーセルの位置を簡単に制御します。
属性 data-slide は、キーワード_prev_または_next_を受け入れます。これらは、現在の位置に関連してスライドの位置を変更します。
data-slide-to を使用して、生のスライドインデックスをカルーセル data-slide-to = "2" に渡します。これにより、スライド位置が0で始まる特定のインデックスに移動します。
data-ride = "carousel" 属性を使用して、ページの読み込み時にカルーセルをアニメーションとしてマークします。
Via JavaScript -以下のようにJavaScriptを使用してカルーセルを手動で呼び出すことができます-

$('.carousel').carousel()

オプション

データ属性またはJavaScriptを介して渡すことができる特定のオプションがありますが、次の表にリストされています-

Option Name	Type/Default Value	Data attribute name	Description
interval	number Default − 5000	data-interval	The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause	string Default − "hover"	data-pause	Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap	boolean Default − true	data-wrap	Whether the carousel should cycle continuously or have hard stops.

方法

カルーセルコードで使用できる便利なメソッドのリストを次に示します。

Method	Description	Example
.carousel(options)	Initializes the carousel with an optional options object and starts cycling through items.	`$('#identifier').carousel({ interval: 2000 })`
.carousel('cycle')	Cycles through the carousel items from left to right.	`$('#identifier').carousel('cycle')`
.carousel('pause')	Stops the carousel from cycling through items.	`$('#identifier')..carousel('pause')`
.carousel(number)	Cycles the carousel to a particular frame (0 based, similar to an array).	`$('#identifier').carousel(number)`
.carousel('prev')	Cycles to the previous item.	`$('#identifier').carousel('prev')`
.carousel('next')	Cycles to the next item.	`$('#identifier').carousel('next')`

例

次の例は、メソッドの使用法を示しています-

<div id = "myCarousel" class = "carousel slide">

   <!-- 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>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>

</div>

<script>
   $(function() {

     //Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });

     //Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });

     //Cycles the carousel to a particular frame
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });

      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });

      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

イベント

ブートストラップのカルーセルクラスは、次の表に示すカルーセル機能にフックするための2つのイベントを公開します。

Event	Description	Example
slide.bs.carousel	This event fires immediately when the slide instance method is invoked.	`$('#identifier').on('slide.bs.carousel', function () { //do something })`
slid.bs.carousel	This event is fired when the carousel has completed its slide transition.	`$('#identifier').on('slid.bs.carousel', function () { //do something })`

例

次の例は、イベントの使用法を示しています-

<div id = "myCarousel" class = "carousel slide">

   <!-- 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>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

</div>

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

Bootstrap-carousel-plugin

目次

ブートストラップ-カルーセルプラグイン

例

オプションのキャプション

使用法

オプション

方法

例

イベント

例