記事にはプロモーションが含まれる場合があります。
ここでは、Bootstrap4で利用できるCarousel(カルーセル)によるスライドショーの作り方を解説します。
カルーセル(Carousel)とは
カルーセルとは、回転木馬という意味の英単語で、複数の横に並んだ写真などの項目をマウスやタッチ操作で左右にスライドして項目を入れ替えることができます。スライドショーやスライダーとも呼ばれます。
■表示例
■ソースコード
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのBootstrap4</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <!-- カルーセル部分 --> <div id="carousel1" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="https://webst8.com/blog/wp-content/uploads/2018/09/seminar-wordpress-aicatch.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/04/mailmagazin-banar-2.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/02/seminar-html.png" alt="" class="d-block w-100"> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/bootstrap.bundle.js"></script> </body> </html> |
作り方の基本
- カルーセル全体をdivで括り、idを指定します(本例では、carousel1)。class名にはcarousel slideを追加します。
- スライド群をdivで括り、classにcarousel-innerを指定します。
- 各スライド項目をdivで括り、class属性にcarousel-itemを指定します。最初に表示したいスライド項目のclass属性にactiveを追加します。
- class名がitemのdiv内に、img要素などの画像を配置します。
- img要素にはレスポンシブになるように、class=”d-block w-100″をつけます。
コントロール(前へ・次へ)をつける
スライドショーにコントロール(前へや次へ)機能をつけることもできます。
■表示例
■上記のソースコード
|
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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのBootstrap4</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <!-- カルーセル部分 --> <div id="carousel1" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="https://webst8.com/blog/wp-content/uploads/2018/09/seminar-wordpress-aicatch.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/04/mailmagazin-banar-2.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/02/seminar-html.png" alt="" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/bootstrap.bundle.js"></script> </body> </html> |
インディケーターをつける
インディケータ(本例ではドット)でスライド項目を切り替えられるようにする場合、classにcarousel-indicatorsを指定したol要素を、全体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 41 42 43 44 45 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのBootstrap4</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <!-- カルーセル部分 --> <div id="carousel1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="https://webst8.com/blog/wp-content/uploads/2018/09/seminar-wordpress-aicatch.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/04/mailmagazin-banar-2.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/02/seminar-html.png" alt="" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/bootstrap.bundle.js"></script> </body> </html> |
オプション設定
javascriptを記述することで、細かい調整もできます。
例えば下記のように記述すると、スライドの間隔を1秒(1000ミリ秒)に設定できます。
|
1 2 3 |
$('.carousel').carousel({ interval: 1000 }) |
■表示例
■上記のソースコード
|
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 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのBootstrap4</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <br><br> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2"> <!-- カルーセル部分 --> <div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="https://webst8.com/blog/wp-content/uploads/2017/11/howto-create-homepage-aicatch.jpg" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2018/09/seminar-wordpress-aicatch.png" alt="" class="d-block w-100"> </div> <div class="carousel-item"> <img src="https://webst8.com/blog/wp-content/uploads/2019/04/bootstrap4-introduction-aicatch.png" alt="" class="d-block w-100"> </div> </div> <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/bootstrap.bundle.js"></script> <script type="text/javascript"> $('.carousel').carousel({ interval: 1000 }) </script> </body> </html> |
Carouselでは、このほかにも細かいオプションが用意されています。詳しくは下記の公式サイトをご参照ください。
Carousel | Bootstrap 4.3
動作の原理を理解しようとすると少し難しくなるので、まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていきましょう。
まとめ
いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のCarousel(カルーセル)の使い方をご紹介しました。
使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
今回は、以上になります。最後までご覧いただきありがとうございました。