非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

      2016/08/24

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

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

 

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

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

  1. レスポンシブデザインに対応
  2. 自動でスライドしてくれる
  3. 手動のスライドボタンもあり
  4. 写真下部に写真の説明を入れられる。

[ad#top-1]

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

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

http://getbootstrap.com/

1

 

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

2

 

HTMLファイルにペースト

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

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

3

 

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

4

 

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

5

 

スライダー幅の調整

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

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

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

6

 

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

7

 

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

8

 

ソースコード公開

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

[ad#ad-1]

スポンサーリンク

 - BootStrap