【JavaScript】カルーセルパネルを手軽に実装できるライブラリ『Owl Carousel』

carousel-javascript-design-owlcarousel

カルーセル(carousel)とは、回転木馬(メリーゴーランド)や空港の回転コンベアーなどの意味を持つ言葉です。

WEBデザインにおいて、カルーセルは複数の画像やコンテンツなどが配置されくるくる回るように動く仕組みを指します。

今回は、このカルーセルを手軽に実装できるJavaScriptライブラリ『Owl Carousel』をご紹介します。

ダウンロード

実装方法

ライブラリの読込み

『Owl Carousel』はjQuery対応のライブラリなので稼動するためには「jQuery(1.7以降)」が読み込まれていることが必要になります。基本的には、以下のライブラリを読込むことで『Owl Carousel』を稼動することができます。

    <!-- Important Owl stylesheet -->
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
     
    <!-- jQuery 1.7+ -->
    <script src="jquery-1.9.1.min.js"></script>
     
    <!-- Include js plugin -->
    <script src="assets/owl-carousel/owl.carousel.js"></script>

デザインテーマの読込み

ライブラリのソースと一緒にボタンなどがデザインされたCSSファイルもありますので、公式サイトのデモページなどにあるデザインを組み込みたい場合は、テーマファイルも合わせて読み込みのがおすすめです。

    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css">

オプション設定・ライブラリの実行

ライブラリを読込んだ後は、オプション設定とライブラリを実行するコードを記述します。下記の例では #owl-demo の要素に対して owlCarousel を適用する内容になっております。

<script type="text/javascript">

    $(document).ready(function() {
      $("#owl-demo").owlCarousel({
     
      items : 4, // 一度に表示するコンテンツ数
     
      });
    });

</script>

オプションの詳しい説明は公式サイトに掲載されております。『Owl Carousel』はオプションにレスポンシブ用の設定があり、コンテンツの横幅に応じて表示する items 数を変えて設定することもできます。

HTML

表示するコンテンツのHTMLソースになります。ID名(owl-demo9 の要素内に、クラス名(item)のコンテンツを配置します。クラス名(item)のコンテンツがカルーセルとして表示される内容になります。

    <div id="owl-demo">
      <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
      <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
    </div>

関連記事

【WP】空き状況を表示するカレンダーを作成することができるBookingプラグイン5選

レストランやホテル、イベント会場などWEBサイトで、席の空き状況をカレンダーに表示して予約をスムーズに行う仕組みを見かけることがあると思います。 この空き状況を案内するカレンダーをWordPress上で作成することができるプラグインがありますのでご紹介します。 今...続きを読む

2015.02.26WordPress

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することが...続きを読む

2019.05.13HTMLコーディング

プロモーションビデオ制作の制作事例を公開いたしました!

店舗や会社、商品やサービスを動画で紹介してみませんか。 インターネット環境の高速化やスマートフォンの普及により多くの方が動画コンテンツを身近に楽しむようになりました。そして、動画コンテンツは、新しいマーケティングツールとして注目されています。 店舗のオープンやイベントのお知ら...続きを読む

2018.09.11

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室