今回は Bootstrap を使って、スライドショーを作成します。

Bootstrap3で用意されているスライドショーcarouselを使うことで、
切り替わる画像の設置が出来ます。

まず、スライドショーを表示する領域をdiv で定義し、
任意のid を設定します。
そして class=”carousel slide” と、
データ属性の data-ride=”carousel” を設置します。

構文は

となります。

今回は、ここへ4つの画像スライドショーを設置すると想定します。

次に、この中にインジケータの設定をします。
インジケータは、画像の分だけリスト形式で作成します。
インジケータは、デフォルトでは○で表示されます。

リスト領域を設定する ol タグに
class=”carousel-indicators” を設定し、
リスト項目を示す li タグに、data-target=”#スライドショー領域のID” を設定します。
#は id を意味しています。
そして、data-slide-to=”” で番号を振っていきますが、
割り当てる番号は0からになるので注意してください。
また、class=”active” を設置することで現在選択しているという状態になります。
この場合●と表示されます。

インジケータ部分の構文は

となります。

次に、表示する画像を設定します。

スライドショーで表示する画像の領域を div で設定し、class=”carousel-inner”を指定します。
そして、表示する画像は div で囲み、class=”item” を指定します。
このときに class=”active” を指定すると、現在選択しているということになります。

構文にすると

というようになります。

そして、左右に画像を移動するボタンを作成します。
ボタンは aタグで作成します。

まずは左ボタンから作成します。
class=”left “ と
class=”carousel-control” を指定します。
そして、
データ属性data-slideにprevを指定します。
また、href=”” には、スライドショー領域のID を指定します。

表示するアイコンは Bootstrap のものを使うので、
span タグで作成し、
class=”glyphicon glyphicon-chevron-left” を指定します
そして
aria-hidden=”true” を指定することでユーザエージェントに認識させないようにします。

これらを元に構文を書くと

というようになります。

同じ要領で、右ボタンも作成できます。
違いは、
a タグでの
class=”right” の指定と、data-slide=”next”の指定、

そして span タグでの class=”glyphicon-chevron-right”の指定です。

こちらの構文は

というようになります。

ここまでが概要です。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。

なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開するととして展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に Bootstrap のライブラリの読み込みです。
ダウンロードして読み込む方法と、ネットから読み込む方法がありますが、
今回はネットから読み込む方法CDNの方法を使います。

でCSSファイルの読み込みをします。

で javascript を読み込みます。

この2つがないと Bootstrap は機能しません。

また、carousel は jQuery がないと画像のスライドが機能しないため、
CDNで jQuery を読み込みます。

もし、スライドが動かない場合は、jQuery の読み込みを忘れていないか確認してみましょう。

次に、画像を用意します。
自分で画像を用意するのは大変ですので、フリー画像を使用します。

今回は画像を4つダウンロードし、ファイル名を
slide1.jpg
slide2.jpg
slide3.jpg
slide4.jpg
として、同じディレクトリにまとめておきます。

次に、スライドショーを表示する領域をdiv で指定します。
このときに id をつけるのですが、今回は slide-menu としました。
今回も Emmet で書いて展開していきます。

として展開すると

となります。
この中に設定を加えていきます。

なお、Emmet で記述するときには
#id名
.クラス名
[] の中にはパラメータを記述、というように書きます。
複数の class=”” を指定するときには、
.carousel.slide
というように続けて記述します。

次にインジケータを作成します。

少し長文なので、解説を加えます。
Emmet で階層を作成するときに下にいれるのなら > を使い、
同じ階層にするのならば + を使います。
$ を指定すると、その部分は連番となります。
*3 の部分は3つ作成するという意味になります。

これを展開すると

となります。

次に、表示する画像の指定です。

これも少しわかりにくので解説です。
連番にするには$ を使いますが、最初の番号を指定したい場合には
$@番号 というようにします。

今回は2から4までなので、$@2 としています。
これを展開すると

というようになります。

最後に、左右に移動するためのボタンを作成します。

を展開して

で前に左に移動するボタンを作成します。

次に、右に移動するボタンを作成するため

を展開します。

これでスライドショーができているので、ctrl + shirt + h で確認してみましょう。

Screenshot from 2016-06-13 22:54:22

スライドショーができているのが確認できます。

次にスライドショーにキャプションを入れてみましょう。

キャプションの作り方は、表示する画像の下に

で領域を指定し、説明文やリンクボタンなどを設置します。

今回は料理の画像なので、料理名と解説を入れてみます。

の部分のソースを変更します。

img タグの下へ

を展開し

とします。

これで再度プレビューをみると、キャプションが追加されているのがわかります。

Screenshot from 2016-06-13 23:07:20

このようにキャプションを追加することで、用途としては
自作のサービスやアプリの紹介をしたり、リンクをつけることでスムーズな誘導が可能になります。

それでは、今回の要点をまとめてみましょう。

・carousel を使うには bootstrap の css と javascript と jQuery のライブラリの読み込みが必要。
・スライドショーの作成には、領域の指定、インジケータの定義、画像の指定、前後へのリンクボタンの作成が必要。
・領域の指定は div で行い、class=”carousel slide” data-ride=”carousel”と idの設定が必要。
・インジケータは ol で作成し、class=”carousel-indicators”を指定。
・インジケータのリストは li で作成し、0 からのカウントとなり、data-slide-to=””で指定する。
・表示したい画像は、全体をdiv で囲み、class=”carousel-inner”を指定する。
・表示する画像は div で囲み、class=”item” を指定する。
・左への移動ボタンは a タグで作成し、class=”left carousel-control” と data-slide=”prev”を指定。
・右への移動ボタンは a タグで作成し、class=”right carousel-control”と data-slide=”next” を指定。
・スライドにキャプションを入れるには、div で領域を作成し、class=”carousel-caption”を指定して、その中に記述。

一見、複雑な構造ですが、Emmet で記述することで簡単に記述できるようになります。
スライドとキャプションを組み合せることで、さまざまなアプローチができますので、試してみてはいかがでしょうか。