【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】ワードプレスで使用する名前の付け方の注意事項

WordPressを使用してWEBサイトやブログを構築するとき、ページの名前、カテゴリーの名前、タグの名前などに英単語で名前をつける際に注意することがあります。プログラミングに馴染みのある方にとっておなじみだと思いますが、名前をつけるときには「予約語」を避けることです。 ...続きを読む

2015.08.20WordPress

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング

【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。 そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimen...続きを読む

2015.02.10HTMLコーディング

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

【WP】ソーシャルボタンを設置できる「WP Social Bookmarking Light」の導入方法

ソーシャルメディアを通じて「いいね」と評価される記事が共有され多くの人に広がることは、第三者から好評を得ている、評判がいいことが多いと思います。 またSEOにおいては、内容が良いものはより上位に掲載されるという考え方があり、ソーシャルメディアで評価されることはSEO対策にも...続きを読む

2015.04.14WordPress