【Bootstrap】カルーセルで画像をスライドさせる

 

今日の記事では、ホームページでよく使われているカルーセル(画像スライド)を実装する方法についてご紹介します。

 

 

カルーセル

 

カルーセルは時間で画像がスライドする仕組みのことです。

 

 

最近いろんなサイトでよく見ますね。トップページの見栄えが良いとアクセスにも影響してくるので重要だと思います。

 

実装に入る前に、それぞれの名称を覚えておきましょう。

 

 

コントローラー:クリックすると画像が切り替わります。右と左があります。

キャプション:画像の上に表示する文字列です。サイトの説明に使います。

インジケーター:何枚目のスライドが表示されているか示す指標です。

 

HTMLでは上記の3つのパートに分けて実装していくので名称を覚えておきましょう。

 

ソースコード

 

まず始めに大まかな枠組みを作ってみます。

 

ソースコードの基本構成

 

top.html

 

div要素に、carouselクラスとslideクラス、属性data-ride=”carousel”を追加しカルーセルの外枠を作成します。コントローラやインジケータのリンク先として使えるようにid属性を設定しておきます。

 

インジケータは、ol要素に”carousel-indecators”クラスを追加し、インジケータの枠を作成します。

 

インジケータの後に複数のスライドやキャプションを含むカルーセル内枠を追加します。div要素に”carousel-inner”クラスを追加します。

 

カルーセル内枠の中にdiv要素と”carousel-item”クラスを使って、スライド画像とキャプションを追加していきます。

 

最後にコントローラを追加します。aタグの中で、”carousel-control-prev”,”carousel-control-next”を追加します。href属性はカルーセル外枠のid属性と一致させます。

 

完成形

 

1140×380のサイズの画像を3枚用意します。(だいたいこのぐらいのサイズであれば多少違っていても問題ありません。)それぞれ、slide_01.jpg ,slide_02.jpg, slide_03.jpgという名前にしておきます。

 

top.html

 

BootstrapとjQueryを使うため、HTMLのどこかで以下のコードが書かれている前提になります。

 

 

jsの方ですが、先にjqueryを書いてその後にbootstrapを書くようにして下さい。順番が違うと動作しないことがあります。

 

実行結果

 

サーバを起動して上記のページにアクセスしてみます。

 

 

こんな感じで3枚の画像がスライドするようになりました。

 

ちなみに、私がハマったポイントですがスタイルシートでdiv要素にpaddingが設定してあると、スライド画像が表示されてから微妙に縮小するような動作をしてしまいます。

 

カルーセルを実装するときは、スタイルシートでdiv要素のpaddingが記載されていないかチェックするようにしましょう。

 

以上となります。最後まで読んでいただきありがとうございました。

 

ABOUTこの記事をかいた人

のっくん

理系院卒で大企業の研究所に就職。 趣味はプログラミング、レアジョブ英会話、筋トレ、旅行。 Twitter:@yamagablog