手軽にカルーセルが作りたいな～
そんなときはBootstrapを使うのがオススメです！
Bootstrapの機能を詳しく知りたい！という方はこちらの書籍がおススメです。
Bootstrapの機能はほぼ載っています。
リンク
こんにちは、ティロといいます。
その辺の理系大学生です。
目次
Bootstrapをcdnで読み込む
以下のコードをhead内に貼り付けてください。
1 2 3 4 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
カルーセルを作る方法
以下のようにhtmlを書くだけでカルーセルが実装できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <div class="container"> <div class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" alt="" src="img/1.png"> </div> <div class="carousel-item"> <img class="img-fluid" alt="" src="img/6.png"> </div> <div class="carousel-item"> <img class="img-fluid" alt="" src="img/wordpressdes.jpg" s> </div> </div> </div> </div> </body> |
各クラスの役割
| carousel slide | カルーセルの外枠、スライドで画像を移動させる |
| carousel-inner | カルーセルの内枠、overhiddenではみ出ている画像を隠している |
| carousel-item | 画像の配置 |
| active | 現在の画像、スライドするとactiveが変わる |
| img-fluid | 外枠の幅に画像を合わせる。この場合はcarousel-item |
デモをご覧ください。
See the Pen
GRqBrgN by hiro web制作とブログ (@hiroweb9)
on CodePen.
カルーセルに機能を追加する
上のカルーセルはスライドしかしないので機能を追加していきます。
追加する機能
- 左右の矢印（コントローラー）
- 画像下に表示されるインジケーター
- 画像のキャプション
左右に矢印（コントローラー）
1 | <div class="carousel slide" data-ride="carousel"> |
次にコントローラーのボタンを設定します。
<div class=”carousel-inner”> ~ </div>の下に
1 2 3 4 5 6 | <a class="carousel-control-prev" href="#carouselControl" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carouselControl" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> |
を追加します。
a要素のhref=”#~”は先に設定したidと同じにします。ここではhref=”#carouselControl”としています。
| carousel-control-prev | 前に戻るボタンの枠 |
| carousel-control-prev-icon | 前に戻るボタン |
| carousel-control-next | 次に進むボタンの枠 |
| carousel-control-next-icon | 次に進むボタン |
| data-slide=”prev、data-slide=”next | jsの制御、これを追加することでアニメーションが実装できる |
これでコントローラーが完成しました。次に任意の画像にスライドできるインジケーターを実装していきます。
画像下に表示されるインジケーター
1 | <div class="carousel slide" id ="carouselControl" data-ride="carousel"> |
1 2 3 4 5 | <ol class="carousel-indicators"> <li data-target="#carouselControl" data-slide-to="0" class="active"></li> <li data-target="#carouselControl" data-slide-to="1"></li> <li data-target="#carouselControl" data-slide-to="2"></li> </ol> |
役割は以下の通りです。
| carousel-indicators | インジケーターの枠を作ります。 |
| data-target | jsの制御、※id名と一致させないと動作しません |
| data-slide-to | スライド番号 |
これだけでインジケーターが作れてしまいます。
最後に画像のキャプションを追加します。
画像にキャプションを加える
画像にキャプションを加えるには
1 | <img class="img-fluid" alt="" src=""> |
の下に以下のコードを加えるだけです。
1 2 3 4 | <div class="carousel-caption"> <h5>見出し</h5> <p>キャプション文</p> </div> |
全体のコードは以下のようになりました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <body> <div class="container"> <div class="carousel slide" id ="carouselControl" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselControl" data-slide-to="0" class="active"></li> <li data-target="#carouselControl" data-slide-to="1"></li> <li data-target="#carouselControl" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" alt="" src="img/1.png"> <div class="carousel-caption"> <h5>見出し</h5> <p>キャプション文</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" alt="" src="img/6.png"> <div class="carousel-caption"> <h5>見出し</h5> <p>キャプション文</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" alt="" src="img/wordpressdes.jpg"> <div class="carousel-caption"> <h5>見出し</h5> <p>キャプション文</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselControl" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#carouselControl" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </body> |
デモ
See the Pen
xxOJqrd by hiro web制作とブログ (@hiroweb9)
on CodePen.
Bootstrapを使うと簡単にカルーセルを実装できました！
ここまでお読みいただきありがとうございました！
こちらの記事もオススメです！
関連記事
bootstrapでドロップダウンメニューが作りたいけどどうやるのか分からん今回はこんな疑問を解決していきます！もちろん、レスポンシブデザインに対応しています。Bootstrapの機能をもっと知りたい！という方はこち[…]
実際にサイトを作りながら勉強したい！という方はこちらがおすすめです．
リンク