複数のブートストラップカルーセルスライドショー
公開: 2016-03-171ページまたは1ページに複数のブートストラップカルーセルスライドショースライダーを追加するにはどうすればよいですか？
このチュートリアルでは、動作するソースコードのサンプルを提供します。 まず、ページの下部にある[コードのダウンロード]ボタンを使用してサンプルコードをダウンロードします。
ページに複数のブートストラップカルーセルスライダーを追加および作成するのはとても簡単です。
それでは、サンプルコードから始めましょう。
ソースコードのダウンロードが完了すると、zipファイル「multiple-bootstrap-carousels.zip」が作成されます。 zipファイルをローカルコンピュータシステムの任意の場所に解凍します。
抽出後、「multiple-bootstrap-carousels」という名前のディレクトリが見つかります。そのディレクトリに、次のアセットがあります。
- CSSディレクトリ
- フォントディレクトリ
- 画像ディレクトリ
- JSディレクトリ
- CSSディレクトリ
- HTMLファイル– multi-bootstrap-carousels.html
これらの証明は何ですか？
これらのアセットは、ブートストラップの複数のカルーセルスライダーを作成するために必要です。
- CSSディレクトリには、レスポンシブHTMLページの設計に使用されるファイル「bootstrap.min.css」が含まれています。
- フォントディレクトリは、ブートストラップCSSによって使用され、さまざまなビルドグラフィックアイコンを生成します。 カルーセルスライダー矢印ナビゲーションコントロールもこれによって生成されます。 こちらで確認できます。
- 画像ディレクトリには、カルーセルスライダーのスライドに使用するすべての画像が含まれています。
- JSディレクトリには、「jquery.min.js」と「bootstrap.min.js」の2つのjsファイルが含まれています。 jquery.min.jsファイルはJavaScriptライブラリであり、jqueryがWebサイトでJavaScriptを使用することを目的としています。 bootstrap.min.jsファイルは、ブートストラップカルーセル、モデルフォーム、ツールチップ、タブなどを作成するために使用されるブートストラップフレームワークjsライブラリファイルです。bootstrap.min.jsファイルはjquery.min.jsファイルに依存しているため、ロードする必要がありますまず、ブートストラップjsを使用する前に。 ブートストラップjsライブラリファイルについて詳しくは、こちらをご覧ください。
- HTMLファイル（multiple-bootstrap-carousels.html）には、複数のカルーセルスライダーのすべてのデザインとコード部分が含まれています。
multi-bootstrap-carousels.htmlファイルについてもっと学びましょう。
HTMLファイルを任意のコードエディタで開く必要があります。 コンピューターにコードエディターツールがインストールされていない場合は、ここにいくつかの有料コードエディターツールがあります。コードエディターツールをダウンロードしてインストールします。
EditPlus+をダウンロード
ヘッドセクションでは、必要なすべてのCSS＆jsファイルと4つのカルーセルJSコードを以下のようにロードしました。
コード
<頭>
<title>複数のブートストラップカルーセルスライドショーの例</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width、initial-scale = 1">
<！-ブートストラップcssライブラリ->
<link rel = "stylesheet" href = "css / bootstrap.min.css">
<！-jQuery最新ライブラリ（最初にこのライブラリをロード）->
<script src = "js / jquery.min.js"> </ script>
<！-ブートストラップjsライブラリ->
<script src = "js / bootstrap.min.js"> </ script>
<！-cssコードをカスタマイズするカルーセル->
<スタイル>
.carousel {
/*スライダーの高さの幅のようにここにカスタマイズCSSを追加できます*/
}
</ style>
<！-カルーセルjsコード->
<スクリプト>
/*最初のカルーセルスライドショー*/
$（'＃carousel-1'）。carousel（{
//サイクリングスライド間の遅延時間、falseの場合、サイクルなし
間隔：500、
//マウスエンターでスライドを一時停止し、マウスリーブで再開します。
一時停止：「ホバー」、
//カルーセルを継続的に循環させるか、ハードストップするか。
ラップ：true、
//カルーセルがキーボードイベントに反応するかどうか。
キーボード：true
}）;
/*2番目のカルーセルスライドショー*/
$（'＃carousel-2'）。carousel（{
間隔：1000、
ラップ：true、
キーボード：true
}）;
/*3番目のカルーセルスライドショー*/
$（'＃carousel-3'）。carousel（{
間隔：2000、
ラップ：true、
キーボード：true
}）;
/*第4カルーセルスライドショー*/
$（'＃carousel-4'）。carousel（{
間隔：3000、
ラップ：true、
キーボード：true
}）;
</ script>
</ head>Bodyセクションでは、2つのカルーセルHTMLコードを定義しています。 次に、最初のスライダーコードの動作について説明します。 col-md-6クラスを使用して、行クラスdivを2つの列に分割しました。 そして、最初の列に、以下と同じ最初のカルーセルスライダーのHTMLコードを追加しました。
<div class = "row">
<！--------------最初の列の開始-------------->
<div class = "col-md-6">
<div class = "jumbotron">
<center><h3>カルーセルワン</h3></ center>
<！--------------最初のカルーセルスライドショーの開始-------------->
<div class = "carousel slide" data-ride = "carousel">
<！-箇条書きをスライドします->
<ol class = "carousel-indicators">
<li data-target = "＃carousel-1" data-slide-to = "0" class = "active"> </ li>
<li data-target = "＃carousel-1" data-slide-to = "1"> </ li>
<li data-target = "＃carousel-1" data-slide-to = "2"> </ li>
</ ol>
<！-スライドのラッパー->
<div class = "carousel-inner" role = "listbox">
<！-スライド1->
<div class = "item active">
<img src = "images / girl-1.jpg" alt = "Chania">
</ div>
<！-スライド2->
<div class = "item">
<img src = "images / girl-2.jpg" alt = "Chania">
</ div>
<！-スライド3->
<div class = "item">
<img src = "images / girl-3.jpg" alt = "Flower">
</ div>
</ div>
<！-左右のスライドが延滞を制御します->
<a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
<span class = "glyphicon glyphicon-chevron-left" aria-hidden = "true"> </ span>
<spanclass="sr-only">前へ</span>
</a>
<a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
<span class = "glyphicon glyphicon-chevron-right" aria-hidden = "true"> </ span>
<spanclass="sr-only">次へ</span>
</a>
</ div>
<！--------------最初のカルーセルスライドショーの終了-------------->
</ div>
</ div>
<！--------------最初の列の終わり-------------->
</ row>上記のHTMLコードにカルーセルスライダーの3つの部分があります
- スライダーの弾丸
- 画像スライド
- スライダーナビゲーション
スライダーの箇条書きセクションは、HTMLの注文リストタグを使用して作成されています。 <ol>は、ブートストラップCSSファイルに定義されたcarousel-indicatorsという名前のクラスを使用します。 また、各<li>タグには属性data-target =”＃carousel-1”があります。ここで、 ＃carousel-1は、サンプルコードの最初のカルーセルjsコードで使用しているIDと同じです。
Slider Image Slidesセクションには、クラスアイテムを含むdivがあります。 このdivのそれぞれに、スライド画像を読み込むための画像タグを追加しました。
スライダーナビゲーションは、画像スライドを左または右方向にナビゲートするために使用されます。 ナビゲーション矢印は、 Glyphiconと呼ばれるブートストラップグラフィックアイコンによって作成されます。 ナビゲーションボタンは、ブートストラップカルーセルデータ属性関数とカルーセル制御クラスを使用してアンカー<a>タグにラップされます。 <a>タグのhref属性に、前にスライダーの箇条書き部分に追加したのと同じID（ ＃carousel-1 ）を追加しました。 このIDは、最初のカルーセルスライドショーjsコードで使用され、最初のスライダー機能を最初のスライダーHTMLコードでアクティブ化します。
2番目のスライダーコードに、2番目のスライダーjsコード、2番目のスライダーの箇条書き、ナビゲーションHTMLコードなど、スライダーコードの3つの部分すべてに別のID ＃carousel-2を割り当てました。
望む！ チュートリアルとサンプルコードは説明的で機能していることがわかります。 コードのすべてのセクションについて例にコメントを付けたので、すべてのコードを簡単に理解できます。
チュートリアルの言語とダウンロード可能なサンプルコードに関する提案がある場合は、メールでご連絡ください。 私たちのメールアドレスはawordpresslife{at}gmail{dot}comです。
このチュートリアルを読み、使用し、サポートしてくれてありがとう。
以下の便利なリファレンスリンクを見つけて、このチュートリアルを作成してください。
jQuery
W3Schools