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

関連記事

D-SALON様WEBサイトのデザイン提案

美容室のD-SALON様のWEBサイトのリニューアルにおけるデザイン提案をいたしました。WEBサイトのリニューアルのご提案において、従来のWEBサイトより、ふんわりとした女性らしく可愛らしいイメージでデザインをいたしました。 お店の特徴やPRしたい内容をバナーとして掲載し、...続きを読む

2019.04.15WEBデザイン美容室

【WP】イベントカレンダーを作成できるプラグイン『Event Organizer』

イベント情報を掲載するサイトを構築するとき、カレンダーで一覧を表示させたり会場の情報を掲載したい要望をいただきます。 カスタム投稿やカスタムフィールドを用いてイベント用の記事を作成したり、Googleカレンダーなどを読み込みカレンダーを表示することもできますが、管理や記...続きを読む

2015.02.23WordPress

【フォント】サインに最適なフリーのシンボンルフォント

WEBサイトや印刷物のデザインにおいて、メニューやボタン、マップ上のシンボルなどに利用者にわかりやすく内容を伝えるためアイコンを用いることがあります。 ビジュアルで内容を伝えることができるシンボルタイプのフリーフォントをまとめてみました。 Heydings Com...続きを読む

2015.02.14フォント

【フォト】鬼岩寺1月28日「厄除け火渡り」

藤枝にある鬼岩寺。弘法大師が当地の人々を苦しめていた鬼を退治した話にその名前の由来があり、鬼が鋭い爪を研いだといわれる「鬼かき岩」が残っています。 毎年1月28日には厄除け火渡りの行事が行われています。 フォトギャラリー ※写真をクリックすると拡大表示します。 [...続きを読む

2017.01.28フォトギャラリー

「アイミツ」にて弊社を紹介していただきました

株式会社ユニラボ ( unilabo Inc. )が運営する「アイミツ」にて、『「本当におすすめできる9社をピックアップ」静岡市のホームページ制作会社をアイミツが徹底調査! 』として、デザインスタジオ・エフを紹介していただきました! https://imit...続きを読む

2020.11.27