Bootstrap4 Carousel(カルーセル)でスライドショーを作る方法

Bootstrap CSS

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

更新日:

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


 


 

 

カルーセル(Carousel)とは

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

■表示例


 

■ソースコード

 

作り方の基本
  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"をつけます。

 

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

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

■表示例


 

■上記のソースコード

 

インディケーターをつける

インディケータ(本例ではドット)でスライド項目を切り替えられるようにする場合、classにcarousel-indicatorsを指定したol要素を、全体divの子要素として配置します。
 

■表示例


 

■上記のソースコード

オプション設定

javascriptを記述することで、細かい調整もできます。
 

例えば下記のように記述すると、スライドの間隔を1秒(1000ミリ秒)に設定できます。

 

■表示例


 

■上記のソースコード

 

Carouselでは、このほかにも細かいオプションが用意されています。詳しくは下記の公式サイトをご参照ください。
Carousel | Bootstrap 4.3
 

動作の原理を理解しようとすると少し難しくなるので、まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていきましょう。

 

▲▲目次に戻る▲▲


 

まとめ

いかがでしたでしょうか。
 

今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のCarousel(カルーセル)の使い方をご紹介しました。
 

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

Carousel | Bootstrap 4.3
 

 

『自分で作る選択を!』

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

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

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

-Bootstrap, CSS
-, , , , , ,

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.