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

150930_001

検証済みブラウザと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)を使う。

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

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

コメントを投稿する

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