Bootstrap Carouselプラグインは、サイトにスライダーを追加する柔軟で応答性の高い方法です。それに加えて、コンテンツは、画像、埋め込みフレーム、ビデオ、または配置する他のタイプのコンテンツになるのに十分な柔軟性です。
プラグインの機能を個別に参照する場合は、carousel.jsを参照する必要があります。または、 bootstrapプラグインの概要章で述べたように、bootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照できます。
1。例
以下は、ブートストラップカルーセルプラグインを使用したループ要素の共通コンポーネントを示す単純なスライドです。 Carouselを実装するには、そのマークでコードを追加するだけです。データ属性を使用する必要はなく、単純なクラスベースの開発だけです。
<！doctype html> <html> <head> <title> bootstrapインスタンス - シンプルなカルーセルプラグイン</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/script.min.js"> </</<スクリプト> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li li> </</" data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> < <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <a href = "＃mycarousel" data-slide = "prev"> ‹</a> <a href = "＃mycarousel" data-slide = " </body> </html>
結果は次のとおりです。
シンプルなカルーセルプラグイン
2。オプションのタイトル
.item内の.carousel-caption要素を介してスライドにタイトルを追加できます。オプションのHTMLをそこに置くだけで、自動的に整列してフォーマットされます。次の例はこれを示しています：
<！doctype html> <html> <head> <title> bootstrapインスタンス - カルーセルプラグインのタイトル</title> <link href = "/css/bootstrap.min.css src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li li> </</" data-target = "＃mycarousel" data-slide-to = "2"> </li> </al> < src = "/media/uploads/2014/07/slide2.png"> <div>タイトル2 </div> </div> <div> <img src = "/media/uploads/2014/07/slide3.png"> <div>タイトル3 </div> </div> </div> <！ data-slide = "prev"> ‹</a> <a href = "＃mycarousel" data-slide = "next">› </a> </div> </body> </html>
結果は次のとおりです。
Carouselプラグインタイトル
3。使用法
データ属性を介して：データ属性を使用すると、カルーセルの位置を簡単に制御できます。
プロパティデータスライドは、現在の位置に対するスライドの位置を変更するために、前または次のキーワードを受け入れます。
カルーセルベッドの底にある生のスライドインデックスにデータスライドを使用します。 Data-Slide-to = "2"は、スライダーを特定のインデックスに移動し、インデックスは0からカウントされます。
Data-Ride = "Carousel"プロパティは、ページが読み込まれたときにアニメーション再生を開始するカルーセルをマークするために使用されます。
JavaScriptを介して：以下に示すように、CarouselはJavaScriptを介して手動で呼び出すことができます。
$（'。CAROUSEL '）。CAROUSEL（）
4。オプション
データプロパティまたはJavaScriptを介して渡されるオプションがいくつかあります。次の表には、これらのオプションがリストされています。
V.メソッド
カルーセルプラグインの有用な方法を次に示します。
vi。例
次の例は、方法の使用を示しています。
<！doctype html> <html> <head> <title> bootstrapインスタンス - カルーセルプラグインメソッド</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/script.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel indicator-> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li li> </</" data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> < <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <a href = "＃mycarousel" data-slide = "prev"> ‹</a> <a href = "＃mycarousel" data-slide = "> < style = "text-align：center;"> <入力タイプ= "ボタン" value = "start"> <input type = "button" value = "pause"> <input type = "button" "value" = "> <入力タイプ="ボタン "値"値 "> <入力タイプ="ボタン "値"値 "値="スライド1 "> <入力ボタン</div> </div> <script> $（function（）{// carousel $（ "。start-slide"）。click（function（）{$（ "＃mycarousel"）。 }） $（ "。next-slide"）。 $（ "＃mycarousel"）。 }）; </script> </body> </html>結果は次のとおりです。
カルーセルプラグインメソッド
7。イベント
次の表には、Carouselプラグインで使用されるイベントを示します。これらのイベントは、機能のフックとして使用できます。
例
次の例は、イベントの使用を示しています。
<！Doctype html> <html> <head> <title> bootstrapインスタンス - カルーセルプラグインイベント</title> <link href = "/css/bootstrap.min.css" rel = "styleSheet"> <script src = "/script.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <！ - carousel metric--> <ol> <li data-target = " data-target = "＃mycarousel" data-slide-to = "2"> </li> </ol> < <img src = "/media/uploads/2014/07/slide3.png"> </div> </div> <！ - carousel navigation-> <a href = "＃mycarousel" data-slide = "prev"> ‹</a> <a href = "＃mycarousel" "> div（</</</<> </</</</ $（ '＃mycarousel'）。 }）; </script> </body> </html>
結果は次のとおりです。
カルーセルプラグインイベント
上記のチュートリアルによると、私は自分の例を作成しました：
Carouselプラグインは、同じサイズのいくつかの大きな写真を順番に再生します。
//基本的な例。 <div id = "mycarousel"> <ol> <li data-target = "＃mycarousel" data-slide-to = "0"> </li> <li = li data-starge = "＃mycarousel" data-slide-to = "1"> </li> <li date-target = "＃mycarousel" data-slide " src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide3.png"> </< data-slide = "prev"> ‹</a> <a href = "＃mycarousel" data-slide = "next">› </a> </div>
データ属性説明：
1.Data-Slideは、現在の位置に対するスライドの位置を変更するために、前または次のキーワードを受け入れます。
2. data-slide-toは、カルーセルの底部に元のスライドインデックスを作成します。 Data-Slide-to = "2"は、スライダーを特定のインデックスに移動し、インデックスは0からカウントされます。
3.data-ride = "carousel"属性ユーザータグCarouselは、ページのロード時にアニメーション再生を開始します。
JavaScriptで呼び出す場合は、Key-Valueペアメソッドを直接使用してデータを削除します。
//カスタムプロパティを設定します
$（ '＃myCarousel'）。Carousel（{//自動再生/2秒間隔：2000、//イベントを設定します： 'Hover'、//ラップ：false、}）;Carouselプラグインは、次のようにいくつかの方法を提供します。
//ボタンをクリックして$（ 'button'）を実行します（ 'click'、function（）{// $（ '＃mycarousel'）。イベント
$（ '＃mycarousel'）。 $（ '＃mycarousel'）。
その他のコンテンツについては、Bootstrap Learning Tutorialを参照してください
上記はこの記事に関するすべてです。誰もがブートストラップカルーセルプラグインを学ぶことが役立つことを願っています。