Owl Carousel 2 をカスタマイズ

150930_001

2018/09/30 公式サイトでは最新ver 2.3.4が公開されています。

 

基本カスタマイズ

ドットナビゲーション

2018/09/30 最新ver 2.3.4では修正されているようなので、ソースからのコピペは不要かもしれません。

ドットナビゲーションはデフォルトで true のはずなのに、なぜか表示されない。
原因はダウンロードしたzipファイルに公式サイトのCSSが含まれていないため。
というわけで、公式ページのソースからコピペ。

前へ次へボタン

上記 SCSS 10行目以降

レスポンシブデザイン

上記 owl.carousel.handle.js 9行目以降

自動カルーセル

上記 owl.carousel.handle.js 3~5行目

 

左右が見えるセンター寄せ

HTMLは上記「基本カスタマイズ」と同様。

 

アイキャッチ 横幅100%

 

フルブラウザ

float を解除したり高さを相対指定で調整するのは面倒なので、vh(viewport height)を使う。

  • リストタグで設置する場合、li に 100vh を指定すればOK
  • ドットナビゲーションには、ネガティブマージンと z-index を指定

HTMLは上記「アイキャッチ 横幅100%」と同様。
SCSSも大方のコードは同様。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。