ホームページ > 記事 > ウェブフロントエンド > ブートストラップカルーセルチャートの実装方法
最初のステップは、コンピューターにインストールされている Sublime Text3 を開き、ファイルを保存する新しいデモ フォルダーを作成し、その中に新しい HTML ファイルを作成し、 Tab ショートカット キーを選択し、タイトルに名前を付けます。図に示すように:
2 番目のステップは、外部 JQuery および Bootstrap ライブラリ ファイルを上部の head タグに導入することです。関連するライブラリ ファイルをダウンロードした後、対応するフォルダーに配置します。 JS ファイルを Body タグの一番下に配置します。 Bootstrap フレームワークは jQuery ライブラリ ファイルに基づいているため、jQuery ライブラリの導入には注意してください。また、これはブートストラップ ライブラリ ファイルの最上位に配置する必要があります。そうしないと、何の効果もありません。図に示すように:
#3 番目のステップは、カルーセル画像のコンテナーを追加することです。見やすくするために、最も外側の div に「コンテナ」 div を追加し、さらに carousel というクラス名のサブ div を追加し、このコンテナに「slidershow」という名前の ID を定義して、後続のデータ属性でトリガーを宣言しやすくします。
<div id="slidershow" class="carousel"></div>
4 番目のステップは、カルーセル画像のカウンターを設計することです。コンテナ内にカウンターを追加し、画像の再生順序を表示する「carousel-indicators」というクラスを追加します。このうち、data-target="#slidershow" は、宣言されたイベントのターゲットをトリガーするために使用されます。コードは次のとおりです。
<ol class="carousel-indicators"> <li class="active" data-target="#slidershow" data-slide-to="0"></li> <li data-target="#slidershow" data-slide-to="1"></li> <li data-target="#slidershow" data-slide-to="2"></li> <li data-target="#slidershow" data-slide-to="3"></li> </ol>
5 番目のステップは、カルーセル画像の再生領域を設計することです。この領域は主にカルーセル画像を表示するために使用されます。 「carousel-inner」という名前のクラスを追加してカルーセル コンテナーに配置し、「item」という名前のコンテナーを追加して各カルーセル画像を配置します。コードは次のとおりです。
<div class="carousel-inner"> <div class="item active"> <img src="images/1.jpg" alt="" style="max-width:90%" /> </div> </div>##関連する推奨事項: 「
bootstrap 入門チュートリアル 」
6 番目のステップ (必要に応じて)各画像に対応するタイトルとコンテンツを追加するには、「carousel-caption」という名前の div クラスを項目に追加するだけです。同様に、いくつかのカルーセル画像を順番に追加します。見た目を美しくするために、画像の幅を 100% に設定してもよいことに注意してください。コードは次のとおりです。<div class="item active"> <img src="images/1.jpg" alt="" style="max-width:90%" /> <!-- 添加对应的标题和内容 --> <div class="carousel-caption"> <h4>标题一</h4> <p>hello,i am tom!</p> </div> </div>7 番目のステップは、カルーセル画像の前面と背面のアイコン コントローラーを設計することです。私たちが通常目にするカルーセル画像には、順方向および逆方向の再生コントローラーが付いています。前方を制御するカルーセルと右のコントロールにタグを追加し、「carousel-control」という名前のクラスと左クラスと右クラスを追加します。このうち、左は順方向再生、右は逆方向再生を意味します。コードは次のとおりです。
<a href="#slidershow" data-slide="prev" class="left carousel-control" role="button"> <span class="glyphicon glyphicon-chevron-left"> </span> </a> <a href="#slidershow" data-slide="next" class="right carousel-control" role="button"> <span class="glyphicon glyphicon-chevron-right"> </span> </a>ステップ 8、ブラウザで表示すると、基本的な効果が表示されます。ユーザー エクスペリエンスをよりわかりやすくするために、カルーセル画像の再生を設計するときに、最初の画像に「アクティブ」クラスを追加すると、デフォルト ページがロードされたときに最初の画像が表示され、div に「slide」を追加します。 ID「slidershow」クラスの機能は、画像間の切り替えをスムーズにすることです。 9 番目のステップで、完全なコードが完成します。コードが正しいことを確認した後、ファイルを右クリックしてブラウザで効果を確認します。効果は図に示すとおりです (実際、コードを記述する各ステップの後に効果を確認する必要があります)。つまりデバッグです。)ブートストラップ フレームワークを使用すると、クラス スタイルを追加するだけで比較的複雑なカルーセル チャートを完成させることができます。
以上がブートストラップカルーセルチャートの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。