Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
場合
以下は、このプラグインと関連するコンポーネントによって作成されたカルーセルケースです。
<div id = "carousel-example-generic" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "＃carousel-example-generic" data-slide = "1"> </li> < data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - スライドのラッパー - > <div> <div> <img src = "..."> <div> ... </div> </div> </div> ... </div> < data-slide = "prev"> <span> </span> </a> <a href = "＃carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>
インターネットエクスプローラー8と9は、トランジションアニメーション効果をサポートしていません
BootstrapはCSS3に基づいてアニメーション効果を実装しますが、Internet Explorer 8＆9はこれらの必要なCSSプロパティをサポートしていません。したがって、両方のブラウザを使用すると、トランジションアニメーション効果が失われます。さらに、JQUERYベースの代替機能の実装を使用するつもりはありません。
オプションのオプション
任意の.itemでは、各スライドに.carousel-captionを追加できます。 HTMLコードを自動的に配置およびフォーマットする任意のHTMLコードを追加することもできます。
900x500
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
アクセシビリティの問題
Carouselコンポーネントは、アクセシビリティ基準と互換性がありません。互換性が必要な場合は、スライドを提示するための他のオプションを検討してください。
使用法
データ属性を介して
データ属性は、カルーセルの位置を簡単に制御できます。データスライドは、再生位置を制御する前または次のキーワードを受け入れることができます。さらに、0から始まるスライド添え字をデータスライドに渡すこともできます。
Data-ride = "Carousel"属性は、ページのロード後に起動するCarouselコンポーネントをマークするために使用されます。
JavaScript経由
カルーセルコンポーネントを手動で開始します。
コードコピーは次のとおりです。
$（'。CAROUSEL '）。CAROUSEL（）
オプション
オプションは、データプロパティまたはJavaScriptを渡すことができます。データ属性の場合、data-interval = ""など、データの後にオプション名を配置する必要があります。
名前 タイプ デフォルト値は 、 インターバル 番号 5000 スライド回転の待機時間を説明します。 falseの場合、カルーセルはループを自動的に開始しません。 マウスはスライド エリア にとどまり 、カルーセルを一時 停止し、マウスがカルーセルを離れます。 カルーセルがループを続けているかどうかを ブーリアン 真実 。
方法
.Carousel（オプション）
Carouselコンポーネントを初期化し、オプションのオブジェクトタイプオプションパラメーターを受け入れ、スライドループを起動します。
$（'。Carousel '）。Carousel（{Interval：2000}）。Carousel（' Cycle '）各フレームを左から右にサイクリングします。
.Carousel（ 'Pause'）
カルーセルを止めてください。
.carousel（number）
カルーセルを指定されたフレームに配置します（フレームサブスクリプトは、配列と同様に0から始まります）。
.carousel（ 'prev'）
前のフレームに戻ります。
.carousel（ 'next'）
次のフレームに移動します。
イベント
BootstrapのCarouselコンポーネントは、リスニングのために2つのイベントを公開します。
| イベントタイプ | 説明する |
|---|---|
| Slide.bs.carousel | このイベントはslideメソッドが呼び出された直後に開始されます。 |
| slid.bs.carousel | すべてのスライドショーが再生されるとトリガーされます。 |
$（ '＃mycarousel'）。
上記は、編集者が紹介したJSプラグインに基づいたブートストラップカルーセル効果ケースの詳細な説明です。私はそれがあなたを助けることができることを願っています！