【Bootstrap4 入門】カルーセルの作り方を分かりやすく解説します

Bootstrapでカルーセルを作る方法
手軽にカルーセルが作りたいな~

そんなときはBootstrapを使うのがオススメです!

 

ティロ

こんにちは、ティロといいます。

その辺の理系大学生です。

 

Bootstrapをcdnで読み込む

以下のコードをhead内に貼り付けてください。

 

 

カルーセルを作る方法

以下のようにhtmlを書くだけでカルーセルが実装できます。

 

各クラスの役割

carousel slideカルーセルの外枠、スライドで画像を移動させる
carousel-innerカルーセルの内枠、overhiddenではみ出ている画像を隠している
carousel-item画像の配置
active現在の画像、スライドするとactiveが変わる
img-fluid外枠の幅に画像を合わせる。この場合はcarousel-item

 

デモをご覧ください。

 

See the Pen
GRqBrgN
by hiro web制作とブログ (@hiroweb9)
on CodePen.

カルーセルに機能を追加する

上のカルーセルはスライドしかしないので機能を追加していきます。

追加する機能

  • 左右の矢印(コントローラー)
  • 画像下に表示されるインジケーター
  • 画像のキャプション

 

左右に矢印(コントローラー)

のコードに id =”carouselControl”を追加します。id名はなんでも良いです。

次にコントローラーのボタンを設定します。

<div class=”carousel-inner”> ~ </div>の下に

を追加します。

a要素のhref=”#~”は先に設定したidと同じにします。ここではhref=”#carouselControl”としています。

 

carousel-control-prev前に戻るボタンの枠
carousel-control-prev-icon前に戻るボタン
carousel-control-next次に進むボタンの枠
carousel-control-next-icon次に進むボタン
data-slide=”prev、data-slide=”nextjsの制御、これを追加することでアニメーションが実装できる

 

これでコントローラーが完成しました。次に任意の画像にスライドできるインジケーターを実装していきます。

 

画像下に表示されるインジケーター

の下に以下のコードを追加します。

 

 

役割は以下の通りです。

carousel-indicatorsインジケーターの枠を作ります。
data-targetjsの制御、※id名と一致させないと動作しません
data-slide-toスライド番号

 

これだけでインジケーターが作れてしまいます。

最後に画像のキャプションを追加します。

画像にキャプションを加える

画像にキャプションを加えるには

の下に以下のコードを加えるだけです。

 

 

全体のコードは以下のようになりました。

 

デモ

 

See the Pen
xxOJqrd
by hiro web制作とブログ (@hiroweb9)
on CodePen.


Bootstrapを使うと簡単にカルーセルを実装できました!

ここまでお読みいただきありがとうございました!

こちらの記事もオススメです!

関連記事

bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます!もちろん、レスポンシブデザインに対応しています。 ティロこんにちは、テ[…]

ドロップダウンメニューの作り方

 

Bootstrapの機能をもっと知りたい!という方はこちらの書籍がおススメです。

Bootstrapの機能はほぼ載っています。

また実際にサイトを作りながら勉強したい!という方はこちらがおすすめです.