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

Owl Carousel2というプラグインを導入することで簡単にカルーセルを実装することが出来ます。Owl Carousel2ではオプションが多く用意されています。この記事ではOwl Carousel2のオプションの使い方をサンプルコード付きで解説しています。

コンテンツ [表示]

  1. 1Owl Carouselのオプションの使い方
  2. 1.1ナビゲーション
  3. 1.2ドットナビゲーションを無効化
  4. 1.3レスポンシブ対応
  5. 1.4開始位置を中央にする
  6. 1.5逆順
  7. 1.6開始位置をずらす
  8. 1.7幅を結合したサイズにする

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

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

あわせて読みたい
Owl Carousel2の導入方法と使い方をサンプルコード付き解説!のイメージ
Owl Carousel2の導入方法と使い方をサンプルコード付き解説!
導入するだけで簡単にカルーセルを実装することが出来るようになるjQueryプラグインのOwl Carousel2があります。簡単に実装できるだけでなく、Owl Carousel2では様々なオプションが用意されておりカスタマイズも簡単にできます。

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

Owl Carouselのオプションの使い方

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

ナビゲーション

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

ドットナビゲーションを無効化

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

レスポンシブ対応

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

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

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

開始位置を中央にする

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

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

逆順

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

開始位置をずらす

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

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

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

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

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

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

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

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事