Owl Carousel2のオプション一覧と使い方を紹介！

jQueryプラグインのOwl Carousel2を導入することで、簡単にカルーセルを実装することが出来ます。

Owl Carousel2の導入方法と基本的な使い方については下記の記事で紹介していますので、是非参考にしてみてください。

この記事ではOwl Carousel2のオプションについてもう少し深掘りしていきたいと思います。

それでは早速サンプルコードを用いて、オプションの使い方を見ていきましょう。

navオプションをtrueで有効にすることで、要素を左右に１つずつずらすことのできるナビゲーションを表示することが出来ます。

ドットナビゲーションの切り替えはdotsオプションで行います。デフォルトでは値がtrueとなっていて有効化状態となっているので、無効化して非表示したい場合にfalseとします。

Owl Carousel2ではレスポンシブ対応も簡単に行うことが出来ます。レスポンシブ対応を行うにはresponsiveオプションを使用します。

responsiveオプションでは値にオブジェクトを指定します。そのオブジェクトの中身にはキーにブレイクポイントの数値で値にキーのブレイクポイント以上の時に適用するオプションをオブジェクト形式で指定してあげます。

ブレイクポイントの数値、数、適用させるオプションを簡単に変えることができて非常に便利ですね。

centerオプションでデフォルトでは最初の要素が左端から開始していたのを、開始位置を中央にすることが出来ます。

また、centerオプションを有効にする際には一緒にloopオプションを有効にしておくとキレイに配置されます。

rtlオプションを有効にすることで、最初の要素が左端から始まっていたのを右端から始まって逆順にすることができます。

stagePaddingオプションは値に数値を指定し、指定した数値のpx分だけ開始位置を右にずらすことが出来ます。

ここでは100を指定しているので、100pxだけ開始位置が右にずれます。

幅を結合したサイズにするには、まずmergeオプションでtrueを指定して有効にします。

結合する数を指定するのは、HTML側で各々の要素にdata-merge属性でその数を指定します。

data-merge="1"を指定した場合は、何も指定しなかったデフォルトの状態と同じです。

data-mergeにitemsで指定した表示数を超える数値を指定した場合でもitemsの数値の幅を結合したサイズとなります。つまり、itemsの数値が最大値です。