スライドショー carousel
Bootstrap3で用意されているスライドショーcarouselの使い方の説明
サイトのTOPページなどでよく見使われている切り替わる画像の設置が出来ます。
スライドショーの設置
<!-- 任意のID指定。クラスとデータ属性の指定。 --> <div id="carousel-example" class="carousel slide" data-ride="carousel"> <!-- インジケーターの設置。下部の○●ボタン。 --> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> ... </ol> <!-- スライドの内容 --> <div class="carousel-inner"> <div class="item active"> <img src="img/slide_01.jpg" alt=""> </div> ... </div> <!-- 左右の移動ボタン --> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-example" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div>
上記は公式サイトのサンプルをベースに変更したデータになります。
ソースを簡単に説明しています。
2行目、まず任意のIDを指定。こちらは数カ所で使用するので変更する際は全て修正が必要です。
他に、クラスの.carouselと.slide、データ属性のdata-ride="carousel"を指定。
データ属性はjavascriptで独自データを取得するために使われているものだと思われます。（知識不足です。独自データ属性、カスタムデータ属性とか呼ばれたりもするようです。）
<!-- 任意のID指定。クラスとデータ属性の指定。 --> <div id="carousel-example" class="carousel slide" data-ride="carousel">
4行目からは下部の○●ボタン部分のインジケーターの設置になります。
リストタグに.carousel-indicatorsを指定。それぞれのリストにデータ属性data-targetを指定、内容は最初に指定したIDを記入。データ属性data-slide-toは1番最初が0からになる点に注意。.activeをつけることで該当の○が●表示になります。
<!-- インジケーターの設置。下部の○●ボタン。 --> <ol class="carousel-indicators"> <li data-target="#carousel-example" data-slide-to="0" class="active"></li> <li data-target="#carousel-example" data-slide-to="1"></li> ... </ol>
11行目からは表示されるスライドの内容になります。
まず、全体を囲むdivに.carousel-innerを指定。続いて表示する画像を囲むdivに.itemを指定。最初に表示するものに.activeを指定。
インジケーターと同じで一番最初が無難だと思います。
<!-- スライドの内容 --> <div class="carousel-inner"> <div class="item active"> <img src="img/slide_01.jpg" alt=""> </div> ... </div>
19行目からは左右に表示される移動ボタンの設置になります。
まず左ボタン。リンクタグに.leftと.carousel-controlを指定。データ属性data-slideにprevを指定。右ボタンも同様。クラス指定が.rightデータ属性の指定がnextになります。
20行目は実際に表示されるボタン部分になります。標準ではglyphiconという公式で用意されているフォントアイコンが指定されています。公式でダウンロードしたBootstrapのdist内にあるfontsがないと表示が文字化け状態になるので注意してください。
<!-- 左右の移動ボタン --> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#carousel-example" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a>
スライドショーのカスタム
キャプション（説明文）などを入れる
設置した画像の下に.carousel-captionを指定したdivで囲むだけです。
内容は自由ですので特にh1指定とかの決まりはありません。ボタンを設置しても大丈夫です。
<div class="item"> <img src="img/slide_02.jpg" alt=""> <div class="carousel-caption"> <h1>夏</h1> <p>太陽が燦々に降り注ぐ暑い季節</p> <button type="button" class="btn btn-primary">春ページ詳細</button> </div> </div>
スライド間隔の変更
一番最初のdivにデータ属性data-interval="任意の数字"を指定するだけでスライド間隔を変更出来ます。（Javascriptで指定する方法もあります）
上記例は2秒間隔の"2000"を指定しています。標準では5000が指定されています。
<div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="2000">
左右ボタンの変更
左右のボタンの表示を変更しています。
当サイトではFont Awesomeのフォントアイコンを利用しているのでそちらに変更してみた例です。.glyphicon-chevron-leftや.glyphicon-chevron-rightに表示位置などのスタイルが適用されているので例では残しています。(本当はきちんと書き直した方が良いとも思いますが。。)
CSSなど調整すれば画像に変更することも可能みたいです。
<span class="fa fa-arrow-circle-o-left glyphicon-chevron-left" aria-hidden="true"></span>