レスポンシブ対応カルーセルを実装できるjQueryプラグイン「OwlCarousel2」。
公式で掲載されているオプションの使い方を紹介しています。
簡単！軽量！レスポンシブ対応スライダー「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にしてナビゲーションを非表示にしてしまう、といったことも。
開始位置を中央に設定
$(function(){
$('.owl-carousel').owlCarousel({
items: 4, //表示する項目数
center: true,
})
});
centerのオプションをtrueにすると、スライダーの開始位置が中央になります。
item数が1だと動作していても見た目が変わりません。item=2以上でご利用ください。
幅を結合したサイズにする
$(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に指定した数値の数だけ幅を結合したサイズになります。
幅を指定したサイズにする
$(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のまま横幅を指定した場合、表示崩れが起きますのでご注意ください。（後の要素と重なる・後の要素との間が不自然に開く）
ハッシュタグで遷移させる
$(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の前にも見切れます。
右に流れるようにする
$(function(){
$('.owl-carousel').owlCarousel({
items: 4, //表示する項目数
rtl:true, //右から左に流す
})
});
rtlをtrueにすると、itemを右から並べることができます。
細かい調整ができるため、とても使い勝手がよく、重宝しています。
今回は公式に掲載されている「Bacic Demos」に掲載されているもののみ解説しました。
「Using build-in plugins」「Using external libraries」、今回飛ばしたEventsの説明、公式のDemosに乗っていないけれどよく使うオプション(navとか）についても後日記事を書こうと考えています。
もしスライダーを実装する機会がありましたら、ぜひ一度OwlCarousel2を使ってみてはいかがでしょうか？