【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】ワードプレスで会員登録機能を実装するプラグイン「WP-Members」

今回紹介するプラグイン「WP-Members」を使用すると、WordPressでユーザーの登録フォームを公開したり、会員情報として住所やフリガナなど項目をカスタマイズすることや、登録しているユーザーのみに記事を限定に公開する機能を構築することができます。 WP-Member...続きを読む

2016.07.01WordPress

【デザイン】写真加工による幻想的なアートの世界

実際の写真を加工して幻想的で不可思議な世界を作るフォトグラファー Erik Johansson 氏の作品をご紹介します。 Erik Johansson Photographer Erik Johansson ...続きを読む

2015.03.10インスピレーション

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

【WP】WordPressへのログインセキュリティを高める『Login LockDown』

WordPressの管理画面には「ユーザー名」と「パスワード」を使用してログインをしますが、ブルートフォースアタックなど外部から不正なログインが行われるリスクも存在します。 ブルートフォースアタックとは、辞書ツールや単語帳を使いあらゆる文字の組み合わせてパスワードと合う...続きを読む

2015.02.20WordPress

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング