この記事では、主にJavaScriptプラグイン-Carouselを学びます。これ以上苦労せずに、勉強に進んでください。完全なチュートリアルを表示できます：Bootstrap 3.0チュートリアル
カルーセル
以下は、このプラグインと関連するコンポーネントによって作成されたカルーセルケースです。
<body> <div id = "carousel-example-generic" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example-generic to =" 0 "> </li> <li date-target ="＃carousel-example-generic " data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - スライドのラッパー - > <div style = "text-align：center"> <div> <img>/img> </div> <div> <img>/img> </div> <img> href = "＃carousel-example-generic" data-slide = "prev"> <span> </span> </a> <a href = "＃carousel-example-generic" data-slide = "next"> </span> </a> </div> <スクリプトsrc = "js/jquery-2.0.0.3.min.js"> < src = "js/bootstrap.min.js"> </script> <script = "text/javascript"> // $（ '。Carousel'）。Carousel（ 'next'）; </script> </body>
インターネットエクスプローラー8と9は、トランジションアニメーション効果をサポートしていません
BootstrapはCSS3に基づいてアニメーション効果を実装しますが、Internet Explorer 8＆9はこれらの必要なCSSプロパティをサポートしていません。したがって、両方のブラウザを使用すると、トランジションアニメーション効果が失われます。さらに、BootstrapはJQueryベースの代替機能を使用するつもりはありません。
オプションのオプション
任意の.itemでは、各スライドに.carousel-captionを追加できます。 HTMLコードを自動的に配置およびフォーマットする任意のHTMLコードを追加することもできます。
<div> <img>/img> <div> <h4>最初のサムネイルラベル</h4> <p> cras justo odio、dapibus ac facilisis in、eagestas eget quam。 donec id elit non mi porta gravida at eget metus。 nullam id dolor id nibh ultricies behicula ut id elit。</p> </div> </div>
3つのアイテムを追加すると、効果が評価されます。
アクセシビリティの問題
Carouselコンポーネントは、アクセシビリティ基準と互換性がありません。互換性が必要な場合は、スライドを提示するための他のオプションを検討してください。
データ属性による使用
データ属性は、カルーセルの位置を簡単に制御できます。データスライドは、再生位置を制御する前または次のキーワードを受け入れることができます。さらに、0から始まるスライド添え字をデータスライドに渡すこともできます。
Data-ride = "Carousel"属性は、ページのロード後に起動するCarouselコンポーネントをマークするために使用されます。
最も外側のカルーセル容器に追加します
<div id = "carousel-example-generic" data-ride = "carousel">
JavaScript経由
Carouselコンポーネントを手動で起動します（上記では、データライドプロパティを使用してCarouselコンポーネントを自動的にオンにします。）：
$（'。CAROUSEL '）。CAROUSEL（）
オプション
オプションは、データプロパティまたはJavaScriptを渡すことができます。データ属性の場合、data-interval = ""など、データの後にオプション名を配置する必要があります。
方法
$（ ""）。カルーセル（オプション）
Carouselコンポーネントを初期化し、オプションのオブジェクトタイプオプションパラメーターを受け入れ、スライドループを起動します。
$（'。Carousel '）。Carousel（{interval：2000}）.Carousel（ 'Cycle'）は、各フレームを左から右にループします。
.Carousel（ 'Pause'）はカルーセルを止めます。
.Carousel（number）は、カルーセルを指定されたフレームに配置します（フレームサブスクリプトは、アレイと同様に0から始まります）。
.Carousel（ 'prev'）は前のフレームに戻ります。
.carousel（ 'next'）次のフレームに移動します。
イベント
BootstrapのCarouselコンポーネントは、リスニングのために2つのイベントを公開します。
$（ '＃CAROUSEL-EXAMPLE-GENERIC'）。
これにより、イベントがカルーセルコンポーネントに結合し、対応するランタイムでそれらを実行します。これは、以前のJavaScriptプラグインで多く説明されており、フォームはすべて一般的であるため、使用するだけです。
写真
これらは、いくつかのより実用的な画像カルーセルプラグインであり、非常に良い結果をもたらします。合理的に使用すると、常にページにポイントを追加します。みんなの学習に役立つことを願っています。
満足していない場合は、これらの記事を確認することができます。詳細な調査：「Bootstrap Learning Tutorial」の編集者が進歩します。
まだ詳細に勉強したい場合は、ここをクリックして2つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。