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

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

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

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

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

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

• Owl Carousel本家
• GitHub

phptemp_owl_161117.zip

サンプルです。

• 組み込み済みサンプル

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

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

まず、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、それぞれ分けていますので、ご注意ください。

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

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

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

• Customizing

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

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

<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修正です。
メイン画像部分に当たる、各種「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」の使い方のAMPページ