簡単！軽量！レスポンシブ対応スライダー「OwlCarousel2」の使い方

レスポンシブ対応はもちろんのこと、マウスホイールやタッチにも対応したカルーセルを実装できるプラグイン「OwlCarousel2」。
60以上のオプション設定も可能で、カスタマイズもかなり効くため重宝しています。

実装は簡単なのですが、実はこのOwlCarousel、以前のバージョンとオプションの記述が変更されている点が多々あり、日本語の解説記事が古いバージョンのものばかりで「なんだ動かねーじゃねーのこんにゃろう」ってなることが多いのです。

今回は「OwlCarousel2 2.0.0-beta.2.4」を用いていますので、過去のバージョンやOwlCarousel無印をご利用の際はご注意ください。
 

OwlCarousel2設置手順

OwlCarousel2は、タッチ・ドラッグ対応のカルーセルを実装できるjQueryプラグインです。
使用するためにはjQueryを読み込む必要があります。

01.OwlCarousel2とjQueryを用意する

以下のリンクから配布ページにアクセスできます。

OwlCarousel2
 

動作に必要なものは「owl.carousel.js」「owl.carousel.css」、jQueryの三つです。

    <link rel="stylesheet" href="owl.carousel.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="owl.carousel.js"></script>	

 

02.カルーセルにする部分を記述する

カルーセルの中身にあたる部分のHTMLを記述します。
「外枠」と「中身」にあたる部分を準備します。リストでもDivでも構いません。
「外枠」にあたる部分には「owl-carousel」というクラスを、
「中身」にあたる部分には「item」というクラスを付与します。
下記例ではリストにしていますが、クラス名さえ合っていればdivでもなんでも問題ないです。

<ul class="owl-carousel">
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
</ul>	

03.条件を設定する

動作に必要な設定を行います。
最低限必要なのは「items」の項目です。

$(function(){
	$('.owl-carousel').owlCarousel({
        	loop:true,　//項目をループさせる
        	margin:10,  //itemの間隔
        	items: 4,   //表示する項目数
        })
});

上のDEMOからデモをご覧になれます。
細かいオプションに関してはまた次回詳しく記述いたします！
また、公式ページのDemosに様々なサンプルが掲載されていますので、そちらもご覧ください。

OwlCarousel2-demo
 

・TAGjQuery, OwlCarousel2, スライダー