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

Bootstrapカルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。応答性に加えて、コンテンツは、画像、iframe、ビデオ、または必要なほぼすべてのタイプのコンテンツを許可するのに十分な柔軟性があります。

このプラグイン機能を個別に含めたい場合は、 carousel.js。そうでなければ、この章で述べたように ブートストラッププラグインの概要、あなたは含めることができます 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>

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

スライドにキャプションを簡単に追加できます。 .carousel-caption 任意の要素内 .item。そこにオプションの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>

使用法

  • Via data attributes −データ属性を使用して、カルーセルの位置を簡単に制御します。

    • 属性 data-slideキーワードprevまたはnextを受け入れます。これにより、現在の位置を基準にしてスライドの位置が変更されます。

    • 使用する data-slide-to 生のスライドインデックスをカルーセルに渡す data-slide-to = "2"、スライド位置を0で始まる特定のインデックスにシフトします。

    • ザ・ data-ride = "carousel" 属性は、ページの読み込みから始まるアニメーションとしてカルーセルをマークするために使用されます。

  • Via JavaScript −カルーセルは次のようにJavaScriptを使用して手動で呼び出すことができます−

$('.carousel').carousel()

オプション

次の表に、データ属性またはJavaScriptを介して渡すことができる特定のオプションを示します。

オプション名 タイプ/デフォルト値 データ属性名 説明
間隔 番号デフォルト-5000 データ間隔 アイテムを自動的に循環させるまでの遅延時間。falseの場合、カルーセルは自動的に循環しません。
一時停止 文字列デフォルト-「ホバー」 データの一時停止 mouseenterでカルーセルのサイクリングを一時停止し、mouseleaveでカルーセルのサイクリングを再開します。
ラップ ブールデフォルト-true データラップ カルーセルを継続的に循環させるか、ハードストップするか。

メソッド

これは、カルーセルコードで使用できる便利なメソッドのリストです。

方法 説明 例
.carousel（オプション） オプションのオプションオブジェクトを使用してカルーセルを初期化し、アイテムの循環を開始します。 
$('#identifier').carousel({
   interval: 2000
})
.carousel（ 'cycle'） カルーセルアイテムを左から右に循環します。 
$('#identifier').carousel('cycle')
.carousel（ 'pause'） カルーセルがアイテムを循環するのを停止します。 
$('#identifier')..carousel('pause')
.carousel（number） カルーセルを特定のフレームに循環させます（0ベース、配列と同様）。 
$('#identifier').carousel(number)
.carousel（ 'prev'） 前のアイテムに循環します。 
$('#identifier').carousel('prev')
.carousel（ 'next'） 次のアイテムに循環します。 
$('#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>

イベント

Bootstrapのカルーセルクラスは、次の表にリストされているカルーセル機能にフックするための2つのイベントを公開します。

イベント 説明 例
slide.bs.carousel このイベントは、スライドインスタンスメソッドが呼び出されるとすぐに発生します。 
$('#identifier').on('slide.bs.carousel', function () {
   // do something
})
slid.bs.carousel このイベントは、カルーセルがスライド遷移を完了したときに発生します。 
$('#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>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved