【基本オプション編】OwlCarousel2の使い方

engineering / 2016年3月27日

レスポンシブ対応カルーセルを実装できるjQueryプラグイン「OwlCarousel2」。
公式で掲載されているオプションの使い方を紹介しています。

sponsord
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on Tumblr

簡単!軽量!レスポンシブ対応スライダー「OwlCarousel2」の使い方で紹介したOwlCarousel2の各種オプションをご紹介したいと思います。

公式で紹介されているものを簡単に訳したものです。項目ごとに公式該当ページへのリンクを設置しておりますので、詳細やデモは公式をご覧くださいませ!
今回は、公式で「Basic demos」に分類されているものをご紹介いたします。
 

目次

※Eventsの説明は割愛しています。また後日別途記事にしたいと考えています。

 

 

Basic demos

レスポンシブ対応

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	responsive : { //レスポンシブ対応
		    // ブレイクポイント 0以上
		    0 : {
		        items : 1,
		    },
		    // ブレイクポイント 480以上
		    480 : {
		        items : 2,
		    },
		    // ブレイクポイント 768以上
		    768 : {
		        items : 3,
		    }
		}
        })
});

responsiveのオプションを使用すると、ブレイクポイントごとに処理を変更することが可能です。
上記では表示させるアイテムの数のみ設定していますが、ほかのオプションも同様に記述できます。
例えば、480以下の時はnavプロパティをfalseにしてナビゲーションを非表示にしてしまう、といったことも。

owl.carousel.js-Responsive

 

 

開始位置を中央に設定

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	center: true,
        })
});

centerのオプションをtrueにすると、スライダーの開始位置が中央になります。
item数が1だと動作していても見た目が変わりません。item=2以上でご利用ください。

owl.carousel.js-Center

 
 

幅を結合したサイズにする

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	merge: true //幅を結合したサイズにする
        })
});
<div class="owl-carousel">
	<div class="item" data-merge="1">1</div>
	<div class="item" data-merge="2">2</div>
	<div class="item" data-merge="4">3</div>
	<div class="item">4</div>
	<div class="item" data-merge="3">5</div>
</div>

margeプロパティでは、itemの大きさを複数個分結合した大きさに変更することが可能です。
margeプロパティを利用する場合、HTMLにdata-mergeを追記する必要があります。
data-mergeに指定した数値の数だけ幅を結合したサイズになります。

owl.carousel.js-Merge

 

 

幅を指定したサイズにする

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	autoWidth:true, //幅を指定したサイズにする
        })
});
<div class="owl-carousel">
	<div class="item" style="width: 200px;">1</div>
	<div class="item" style="width: 150px;">2</div>
	<div class="item" style="width: 100px;">3</div>
	<div class="item" style="width: 500px;">4</div>
	<div class="item" style="width: 500px;" >5</div>
</div>

autoWidthのオプションをtrueにすると、インラインスタイルで要素幅を個別に指定できるようになります。
autoWidthがfalseのまま横幅を指定した場合、表示崩れが起きますのでご注意ください。(後の要素と重なる・後の要素との間が不自然に開く)

owl.carousel.js-Auto Width

 
 

ハッシュタグで遷移させる

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	URLhashListener:true, //ハッシュタグでの遷移を可能にする
	        startPosition: 'URLHash', //URLにハッシュタグが付いている時にハッシュの位置から始める
        })
});
<div class="owl-carousel">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	<div class="item" data-hash="hash">4</div>
	<div class="item">5</div>
</div>
<a href="#hash">btn</a>

URLhashListenerのオプションをtrueにすると、ハッシュタグで指定のitemに遷移できるようになります。
遷移先のitemにdata-hashを追記してください。
また、startPosition: ‘URLHash’を設定することで、URLにハッシュタグが付いている時にハッシュの位置から始めることができます。

owl.carousel.js-Url Hash Navigation
 
 

前後のitemを見切れさせる

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	stagePadding: 50,//開始位置をずらす(単位はpx)
        })
});

stagePaddingを使うと、px単位で開始位置をずらすことができます。
loopをtrueに設定していれば、最初のitemの前にも見切れます。

owl.carousel.js-stagePadding
 
 

右に流れるようにする

$(function(){
	$('.owl-carousel').owlCarousel({
        	items: 4,   //表示する項目数
        	rtl:true, //右から左に流す
        })
});

rtlをtrueにすると、itemを右から並べることができます。

owl.carousel.js-Right To Left
 
 

細かい調整ができるため、とても使い勝手がよく、重宝しています。
今回は公式に掲載されている「Bacic Demos」に掲載されているもののみ解説しました。
「Using build-in plugins」「Using external libraries」、今回飛ばしたEventsの説明、公式のDemosに乗っていないけれどよく使うオプション(navとか)についても後日記事を書こうと考えています。

もしスライダーを実装する機会がありましたら、ぜひ一度OwlCarousel2を使ってみてはいかがでしょうか?

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on Tumblr