【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】イベントカレンダーを作成できるプラグイン『Event Organizer』

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

2015.02.23WordPress

【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。 { margin: 0 auto...続きを読む

2015.02.07HTMLコーディング

【JavaScript】文字設定をレスポンシブ対応してくれるライブラリ『FlowType』

『FlowType』はレスポンシブデザインのサイトにおいて、横幅の変化に応じて設定されている文字の大きさや行の高さを自動的に調整をしているJavaScriptライブラリです。 イメージ ダウンロード ライブラリのダウンロードはこちらから行うことが出来ます。 ...続きを読む

2015.02.10HTMLコーディング

【フォト】love local MARKET 1/26 HOTマーケット

love local MARKET 月末の金曜日はちょっと豊かに。プレミアムフライデー。藤枝駅南口広場で開催されている、HOTマーケットに行ってきました。 ここ最近は藤枝でもめずらしい雪が舞うほど冷え込む日が続いているなか、屋外でのマーケット。イルミネーションに照らされて、...続きを読む

2018.01.26フォトギャラリー

藤枝おんぱく『着物でまちあるき』(4/25)

藤枝おんぱく『着物でまちあるき』(4/25)満開の藤が咲く蓮華寺池公園まで、お気に入りの着物で「まちあるき」をするプロジェクトです。八百年の歴史ある「熊谷山 蓮生寺」での着付け体験に加え、「匂い袋づくり」「着物とマナーの話」と盛り沢山の様子のフォトレポートをお届けします。 ...続きを読む

2015.05.01フォトギャラリー