Bootstrap4 Carousel(カルーセル)によるスライドショーの使い方を徹底解説

SHARE

記事にはプロモーションが含まれる場合があります。

ここでは、Bootstrap4で利用できるCarousel(カルーセル)によるスライドショーの作り方を解説します。
 


 


 

合わせて読みたい記事

Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！

 

カルーセル(Carousel)とは

カルーセルとは、回転木馬という意味の英単語で、複数の横に並んだ写真などの項目をマウスやタッチ操作で左右にスライドして項目を入れ替えることができます。スライドショーやスライダーとも呼ばれます。
 

■表示例

 

■ソースコード 

<!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>

 

作り方の基本
  1. カルーセル全体をdivで括り、idを指定します(本例では、carousel1)。class名にはcarousel slideを追加します。
  2. スライド群をdivで括り、classにcarousel-innerを指定します。
  3. 各スライド項目をdivで括り、class属性にcarousel-itemを指定します。最初に表示したいスライド項目のclass属性にactiveを追加します。
  4. class名がitemのdiv内に、img要素などの画像を配置します。
  5. img要素にはレスポンシブになるように、class=”d-block w-100″をつけます。

 

コントロール(前へ・次へ)をつける

スライドショーにコントロール(前へや次へ)機能をつけることもできます。
 

■表示例

 

■上記のソースコード 

<!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の子要素として配置します。
 

■表示例

 

■上記のソースコード 

<!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ミリ秒)に設定できます。

$('.carousel').carousel({
  interval: 1000
})

 

■表示例

 

■上記のソースコード

<!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(カルーセル)の使い方をご紹介しました。
 

使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
 

Carousel | Bootstrap 4.3
 

合わせて読みたい記事

Bootstrap4の使い方 ブートストラップの導入方法と基本を徹底解説！

 

 

今回は、以上になります。最後までご覧いただきありがとうございました。
 

前の記事

Bootstrap4 Popover(ポップオーバー)の使い方…

次の記事

Bootstrap4 Pagination(ページネーション)…