【jQuery】カルーセルプラグイン「Owl Carousel 2」をカスタマイズする [IE10 / Android 4.4 以上]

150930_001

Owl Carousel は、有名プラグインの中で最も滑らかにスライドする、タッチデバイス対応のカルーセルスライダーです。バージョン2はなぜかベータ版のままですが、実務で問題なく使えるので、案件ごとにカスタマイズします。

目次

検証済みブラウザとOS

  • IE 9~ ※IE9は一部CSSの調整が必要
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 9
  • Android 5

 

基本カスタマイズ

ドットナビゲーション

ドットナビゲーションはデフォルトで true のはずなのに、なぜか表示されない。

原因は、ダウンロードしたzipファイルに公式サイトのCSSが含まれていないため。というわけで、公式ページのソースからコピペする。

前へ次へボタン

上記 SCSS 10行目以降

レスポンシブデザイン

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

自動カルーセル

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

 

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

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

 

アイキャッチ 横幅100%

 

フルブラウザ

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

Android 4.3 以下では vh 使用不可
Can I use で確認する

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

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

    • このエントリーをはてなブックマークに追加