Bootstrapで超簡単に写真のスライダーが作れるよ

2016/08/18 2016/08/24

前回、Bootstrapを使ってレスポンシブWebページを作りました。

BootStrapで超簡単にレスポンシブWebページが作れる！たった22行で作れるよ。

Bootstrapはいろいろな部品が用意されていますが、今回は画像を横スライドする方法を紹介します。カルーセルという機能を使うのですが、これをイチから作るにはちょっとハードルが高いのですが、Bootstrapだったら超簡単です。

Bootstrapスライダー(カルーセル)の特徴

[ad#top-1]

BootstrapのWebサイトからサンプルコードをGET

BootstrapのWebサイトに行って、上部の「JavaScript」をクリックします。

ページの下の方に、「Carousel」という項目があるので、その下のソースコード（HTMLタグ）がそのサンプルコードになります。「Copy」ボタンをクリックするとソースコードがクリップボードにコピーされます。

前回のindex.htmlをベースにしたいと思います。スマホ対応しているので。

その中の下図の赤い四角で囲ったところを消して、さきほどコピーしたコードを貼り付けます。

サンプルコードで「…」になっているところ（画像のパス等）は任意で入力しなければなりません。下図の通り写真３枚分を入れました。写真３枚（1.jpg, 2.jpg, 3.jpg）はあらかじめ用意しています。ちなみに、ソースコードは最後に公開しております。

これでどうなるかというと、スライダーとして機能することはしますが、右側に余白が出てしまいます。これはブラウザの幅が写真幅より大きいとこうなってしまうようです。

なので、最初のdivタグに、

style=“max-width:960px;margin:auto;”

を追加します。960pxは画像幅と同じです。単純にwidthとしなかったのはレスポンシブデザインに対応するためです。widthだと960pxに固定してしまうので、スマホで見ると画像がはみ出てしまいます。なので、max-widthを用いました。

これで下図のように整いました。

スマホで見るとこんな感じです。ちゃんと対応しています。

下記にソースコードを公開します。※2016/8/24 GitHub/Gist経由に変更しました。

[ad#ad-1]