ブートストラップカルーセル（回転木馬）ウィジェット
カルーセル（回転木馬）プラグインブートストラップサイトへの柔軟な対応がスライダースタイルの方法を追加するだけです。 また、コンテンツが十分に柔軟である、画像、埋め込まれたフレーム、ビデオか、配置するコンテンツの任意の他のタイプとすることができます。
あなたは、個々のプラグイン機能を参照したい場合は、carousel.jsを参照する必要があります。 または、 ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。
例
ここでブートストラップカルーセル（回転木馬）を使用して、簡単なスライドプラグインが共通のコンポーネントのループ要素を示しています。 回転を達成するために、あなただけの、そのタグを使用してコードを追加する必要があります。 データ属性を使用する必要はありません、のみとすることができる単純なクラスベースの開発を必要としています。
例
<DIV ID = "myCarousel" クラス = "カルーセルスライド」>
<！ - カルーセル（回転木馬）インデックス - >
<オル クラス = "カルーセル・指標」>
<李 データターゲット = "#myCarousel" データ・スライドへ= "0 " クラス= "アクティブ"> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "1 "> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "2 "> </ LI>
</オル>
<！ - カルーセル（回転木馬）プロジェクト - >
<DIV > クラス = "カルーセル-内側」
<DIV クラス = "項目アクティブ">
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "最初のスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "セカンドスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "サードスライド」>
</ DIV>
</ DIV>
<！ - カルーセル（回転木馬）ナビゲーション - >
<A クラス = "カルーセル・コントロールは左」 href = "#myCarousel"
データ-スライド= "前へ"> ＆lsaquo。
</ A>
<A クラス = "カルーセル・コントロール権」 href = "#myCarousel"
データ-スライド= "次の"> ＆rsaquo;
</ A>
</ DIV>
»をお試しください
結果は以下の通りであります：
オプションのタイトル
あなたは.item内部.carousel-caption要素によってスライドにキャプションを追加することができます。 あなただけがそれを自動的に整列され、フォーマットされる場所に任意のHTMLを配置する必要があります。 次の例では、この点を示しています。
例
<DIV ID = "myCarousel" クラス = "カルーセルスライド」>
<！ - カルーセル（回転木馬）インデックス - >
<オル クラス = "カルーセル・指標」>
<李 データターゲット = "#myCarousel" データ・スライドへ= "0 " クラス= "アクティブ"> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "1 "> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "2 "> </ LI>
</オル>
<！ - カルーセル（回転木馬）プロジェクト - >
<DIV > クラス = "カルーセル-内側」
<DIV クラス = "項目アクティブ">
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "最初のスライド」>
<DIV クラス = "カルーセル・キャプション"> タイトル1 </ DIV>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "セカンドスライド」>
<DIV クラス = "カルーセル・キャプション"> タイトル2 </ DIV>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "サードスライド」>
<DIV クラス = "カルーセル・キャプション"> タイトル3 </ DIV>
</ DIV>
</ DIV>
<！ - カルーセル（回転木馬）ナビゲーション - >
<A クラス = "カルーセル・コントロールは左」 href = "#myCarousel"
データ-スライド= "前へ"> ＆lsaquo。
</ A>
<A クラス = "カルーセル・コントロール権」 href = "#myCarousel"
データ-スライド= "次の"> ＆rsaquo;
</ A>
</ DIV>
»をお試しください
結果は以下の通りであります：
使用法
- データ属性を通っ：dataプロパティには、簡単にカルーセル（回転木馬）の位置を制御することができます。
- 現在の位置にスライドの位置を変更するには、キーワードPREVまたは次を受け入れるデータ・スライド属性 。
- ホイールインデックスに元のスライドにコンパニオンを渡すために、データのスライドを-使用して、データ・スライドへ= " 2"は、カウントを開始するには、0から、特定のインデックスにインデックスを、スライダを移動します。
- データ・ライド= "カルーセル"属性は、ページがムービーの再生を開始するためにロードされるときに回転をマークするために使用されます。
- JavaScriptをすることで次のようにカルーセル（回転木馬）は、JavaScriptを使用して手動で起動できます。
$（ '。カルーセル'）。カルーセル（）
オプション
合格するためのデータ属性やJavaScriptを通していくつかのオプションがあります。 次の表は、これらのオプションを示します：
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
ウェイ
ここではカルーセル（回転木馬）プラグイン便利な方法のいくつかは、次のとおりです。
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#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" クラス = "カルーセルスライド」>
<！ - カルーセル（回転木馬）インデックス - >
<オル クラス = "カルーセル・指標」>
<李 データターゲット = "#myCarousel" データ・スライドへ= "0 "
クラス= "アクティブ"> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "1 "> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "2 "> </ LI>
</オル>
<！ - カルーセル（回転木馬）プロジェクト - >
<DIV > クラス = "カルーセル-内側」
<DIV クラス = "項目アクティブ">
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "最初のスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "セカンドスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "サードスライド」>
</ DIV>
</ DIV>
<！ - カルーセル（回転木馬）ナビゲーション - >
<A クラス = "カルーセル・コントロールは左」 href = "#myCarousel"
データ-スライド= "前へ"> ＆lsaquo; </ A>
<A クラス = "カルーセル・コントロール権」 href = "#myCarousel"
データ-スライド= "次の"> ＆rsaquo; </ A>
<！ - コントロールボタン - >
<DIV スタイル= "テキスト整列：センター ;">
<入力 = "ボタン"を入力 クラス = "BTN開始スライド」 値 = "スタート">
<入力 = "ボタン"を入力 クラス = "BTNポーズスライド」 値 = "一時停止">
<入力 = "ボタン"を入力 クラス = "前へスライドBTN」 値 =「前のスライド」>
<入力 = "ボタン"を入力 クラス = "BTN次のスライド」 値 = "次のスライド">
<入力 = "ボタン"を入力 クラス = "BTNスライド-1」 値 = "スライド1">
<入力 = "ボタン"を入力 クラス = "BTNスライド-2」 値 = "スライド2">
<入力 = "ボタン"を入力 クラス = "BTNスライド-3」 値 = "スライド3">
</ DIV>
</ DIV>
<スクリプト>
$（関数（）{
// 初期化カルーセル $（ ".start-スライド」）をクリックします（関数（）{$（" #myCarousel」）カルーセル（ 'サイクル'）;.}）;. // ストップ回転 。$（ ".pause-スライド」 ）をクリックします（関数（）{。$（" #myCarousel」）カルーセル（ 'ポーズ'）;}）; // プロジェクトのループ・ローテーション $（ ".prev-スライド」）をクリックします（関数（）{$（" #myCarousel」）カルーセル（ '前へ'）;.}）;. // 次の項目への回転周期 $（ ".next-スライド」）をクリックします（関数（）{$（" #myCarousel」）カルーセル（ '次'）;.}）;. // ループの回転の特定のフレームに $（ ".slide-One」）をクリックしてください。（関数（）{$（" #myCarousel」）カルーセル（0）;.}）;. $（ ".slideツー」）をクリックします（関数（）{$（ 「#myCarousel」）カルーセル（1） ;}）; $（ ".slide-3」）をクリックします（関数（）{$（" #myCarousel」）カルーセル（2）; ..}）;}）;
</スクリプト>
»をお試しください
結果は以下の通りであります：
イベント
次の表は、カルーセル（回転木馬）はプラグインのイベントで使用されるように一覧表示されます。 これらのイベントは時フック関数を使用することができます。
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
例
次の例では、イベントの使用方法を示します。
例
<DIV ID = "myCarousel" クラス = "カルーセルスライド」>
<！ - カルーセル（回転木馬）インデックス - >
<オル クラス = "カルーセル・指標」>
<李 データターゲット = "#myCarousel" データ・スライドへ= "0 "
クラス= "アクティブ"> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "1 "> </ LI>
<李 データターゲット = "#myCarousel" データ・スライドへ= "2 "> </ LI>
</オル>
<！ - カルーセル（回転木馬）プロジェクト - >
<DIV > クラス = "カルーセル-内側」
<DIV クラス = "項目アクティブ">
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "最初のスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "セカンドスライド」>
</ DIV>
<DIV クラス = "アイテム">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "サードスライド」>
</ DIV>
</ DIV>
<！ - カルーセル（回転木馬）ナビゲーション - >
<A クラス = "カルーセル・コントロールは左」 href = "#myCarousel"
データ-スライド= "前へ"> ＆lsaquo; </ A>
<A クラス = "カルーセル・コントロール権」 href = "#myCarousel"
データ-スライド= "次の"> ＆rsaquo; </ A>
</ DIV>
<スクリプト>
$（関数（）{$（ '#myCarousel'）。（ 'slide.bs.carousel」について、機能 （） {
警告 （「 スライドインスタンスメソッドが呼び出されたときにすぐにイベントをトリガしました。 "）;}）;}）;
</スクリプト>
»をお試しください
結果は以下の通りであります：
