カルーセルの作り方 Bootstrap3.3.7

Bootstrap

カルーセル Carouselの使い方 | BootStrap 3.3.7 のJavascript

投稿日:2019年2月18日 更新日:

Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。
 

ここでは、Bootstrap3.3.7に搭載されている「カルーセル」の使い方をご紹介します。
 


 

スライドショーが作れるんですね。

 

関連 Bootstrap4版でのカルーセルの使い方について

Bootstrap4版でのカルーセルの使い方は「Bootstrap4 Carousel(カルーセル)によるスライドショーの使い方を徹底解説」をご覧ください。

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

 


 

合わせて読みたい記事

BootStrap3の基本・環境設定から実施したい方はこちらの記事をご覧ください。

Bootstrapの使い方 導入方法と基本・レスポンシブデザインを徹底解説

 

カルーセル(Carousel)とは

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

■表示例


 
 

カルーセルのサンプルソースコード

上記表示例のソースコードは下記の通りです。
 

 

カルーセル(carousel)の解説

ここでは、カルーセルの簡単な解説を行います。
 
BootStrap carouselの解説

 

  1. カルーセル全体をdivで括り、idを指定します(本例では、carousel1)。
  2. スライド群をdivで括り、classにcarousel-innerを指定します。
  3. 各スライド項目をdivで括り、class属性にitemを指定します。最初に表示したいスライド項目のclass属性にactiveを追加します。
  4. class名がitemのdiv内に、画像などのスライド項目を配置します。

 

オプション

  • インディケータ(本例ではドット)でスライド項目を切り替えられるようにする場合、classにcarousel-indicatorsを指定したol要素を、全体divの子要素として配置します。
  • カルーセルの左側をクリックすることで、前のスライド項目に戻れるようにする場合は、class属性にleft carousel-controlを指定したa要素を、1のdiv要素の子要素として配置します。data-slide="prev"も指定します。hrefには、カルーセルのid属性値を#に続けて指定します。
    同様に、カルーセルの右側をクリックすることで、次のスライド項目に進めるようにする場合は、classにright carousel-controlを指定したa要素を、1のdiv要素の子要素として配置します。data-slide="next"も指定します。hrefには、カルーセルのid属性値を#に続けて指定します。

 
 

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

 

まとめ スライドショーに使えるカルーセル機能

今回は、Bootstrap3.3.7のjavascriptプラグイン「カルーセル」についてご紹介しました。
 

BootStrapで簡単なスライドショーを実装する際には、ぜひこのカルーセルのJavascriptを検討していみましょう。
 


 

まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていってみてください。
 

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

 


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

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

詳細はこちら


 

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-Bootstrap
-, ,

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