複数のブートストラップカルーセルスライドショー

公開: 2016-03-17

1ページまたは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ファイルを任意のコードエディタで開く必要があります。コンピューターにコードエディターツールがインストールされていない場合は、ここにいくつかの有料コードエディターツールがあります。コードエディターツールをダウンロードしてインストールします。

NotePad Plus +
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