HOME > コラム > WEB全般 > jQueryの画像スライダー「Owl Carousel」の使い方

jQueryの画像スライダー「Owl Carousel」の使い方

コラム

Owl Carouselは、画像スライダーのjQueryプラグインです・・・ただ、細かいオプションが豊富に用意されていて、それでいて表示パターンも変えることが出来るのが特徴です。
過去のバージョンは重さなどを感じたことがあったのですが、最新バージョン(v1.3.3)ではかなり快適に動いてくれています。
画像スライダーのjQueryプラグインは色々な種類がありますが、とりあえずカスタマイズ性と挙動感を悪く感じないようだったらおススメしたい感じがするプラグインです。
本家サイトでデモが設置されていたり、ダウンロードファイルの中身も分かりやすいですし、とりあえずカスタマイズの練習をしたい方でもおススメだと感じました。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

jQueryの画像スライダー「Owl Carousel」の使い方

カルーセルの意味

Owl Carouselは、画像スライダーのjQueryプラグインです。 名前の通り、カルーセルです。

カルーセルとは「くるくる回る」という意味があり「回転木馬」や「メリーゴーランド」のような乗り物を指すときに使う言葉のようです。
なので、画像がスラスラ回るような感じで動的に表現されているjsはどれも「カルーセル」に当たる感じです。

さて、今回のOwl Carouselも、設置は大して難しいモノではありませんので、そのまま進めていきたいと思います。

本家サイト

本家サイトです。
GitHubからプラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_owl_161117.zip
組み込み済みサンプル

サンプルです。

カルーセルの箇所に使っている画像は、本家ファイルの中にあった画像ファイルです。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
読み込ませたファイル

まず、cssファイルとjsファイルを読み込ませます。
今回はトップページにカルーセルを設置しましたので、トップページのみ読み込ませています。

<link href="/css/owl.carousel.css" type="text/css" rel="stylesheet" />
<link href="/css/owl.theme.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/owl.carousel.js"></script>

それぞれのファイルは本家からダウンロードしてきたフォルダ内の「owl-carousel」に入っています。
当サイトで配布しているファイルではcss、js、img、それぞれ分けていますので、ご注意ください。

動作させるためのjs記述

続いてhead内に以下の記述を入れてください。

<script>
$(document).ready(function() {
  $("#owl-example").owlCarousel();
});
</script>

デフォルトのjs記述です。
本家サイト内にはオプション記述が豊富に用意されているので、気になる方は是非試してみてください。
以下に本家にあるオプション記述を抜粋します。
以下で設定されている内容はデフォルト状態のモノとなっていますので、適宜修正してみてください。
”数字”の内容は”数字”で、”false”と書かれている箇所は”true”で書き換えてみてください。

<script>
$(document).ready(function() {
$("#owl-example").owlCarousel({

   // Most important owl features
   items : 5,
   itemsCustom : false,
   itemsDesktop : [1199,4],
   itemsDesktopSmall : [980,3],
   itemsTablet: [768,2],
   itemsTabletSmall: false,
   itemsMobile : [479,1],
   singleItem : false,
   itemsScaleUp : false,

   //Basic Speeds
   slideSpeed : 200,
   paginationSpeed : 800,
   rewindSpeed : 1000,

   //Autoplay
   autoPlay : false,
   stopOnHover : false,

   // Navigation
   navigation : false,
   navigationText : ["prev","next"],
   rewindNav : true,
   scrollPerPage : false,

   //Pagination
   pagination : true,
   paginationNumbers: false,

   // Responsive 
   responsive: true,
   responsiveRefreshRate : 200,
   responsiveBaseWidth: window,

   // CSS Styles
   baseClass : "owl-carousel",
   theme : "owl-theme",

   //Lazy load
   lazyLoad : false,
   lazyFollow : true,
   lazyEffect : "fade",

   //Auto height
   autoHeight : false,

   //JSON 
   jsonPath : false, 
   jsonSuccess : false,

   //Mouse Events
   dragBeforeAnimFinish : true,
   mouseDrag : true,
   touchDrag : true,

   //Transitions
   transitionStyle : false,

   // Other
   addClassActive : false,

   //Callbacks
   beforeUpdate : false,
   afterUpdate : false,
   beforeInit: false, 
   afterInit: false, 
   beforeMove: false, 
   afterMove: false,
   afterAction: false,
   startDragging : false
   afterLazyLoad : false

})
});
</script>
html部分の内容について

カルーセルを表示させる部分に以下の記述を書き入れてください。

<div id="owl-example" class="owl-carousel">
<div><img src="/img/owl1.jpg" alt="" /></div>
<div><img src="/img/owl2.jpg" alt="" /></div>
<div><img src="/img/owl3.jpg" alt="" /></div>
<div><img src="/img/owl4.jpg" alt="" /></div>
<div><img src="/img/owl5.jpg" alt="" /></div>
<div><img src="/img/owl6.jpg" alt="" /></div>
<div><img src="/img/owl7.jpg" alt="" /></div>
<div><img src="/img/owl8.jpg" alt="" /></div>
</div>

Owl Carouselは、画像の部分に当たる<div>を装飾することで、表示部分を自由に表現することが出来ます。
背景に画像を差し込み、テキストやアイコン画像を設置するようなことも可能です。
本家では、そのような表現をされている感じですね。

テンプレートのCSS修正

最後に、当テンプレートのCSS修正です。
メイン画像部分に当たる、各種「main.css」3種の”#main”の部分を適宜修正してください。

配布ファイルでは横幅100%指定のみの記述にしています。
もともと入れていた背景画像の記述はコメントアウトしています。

最後に動作確認

これらの設置や調整が完了されましたら、後は動作確認をしてください。
正常に動けば設置完了です。

そういえば・・・Owl Carouselは画像の部分をクリックすると手の画像が表示されるようになっています。
また、画像の呼び出しが遅い時には、”loading”(?)のようなくるくる回る画像があります。
配布ファイル内「img」フォルダの中に「AjaxLoader.gif」と「grabbing.png」入れています。
これも本家フォルダ内にありますので、きっちり移動させておいてくださいね。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
Owl Carouselはレスポンシブ対応もしているため、特に何かの配慮をしなければいけないわけではありません。
動作確認などは必要ですが、必要以上のカスタマイズや調整は必要ない感じで出来上がっています。
便利ですね。

画像スライダーのjQueryプラグインはたくさんあるので、どれを使おうか迷うことが多いと思います。
Owl Carouselは、そんな時に検討の余地に入れる価値があるjQueryプラグインです。

是非、試してみてくださいね。

執筆 : 清水 隼斗

jQueryの画像スライダー「Owl Carousel」の使い方の通常ページ

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。

jQueryの画像スライダー「Owl Carousel」の使い方」のシェアをお願い致します!