jQuery・カルーセルプラグイン「Owl Carousel 2 Thumbs」の使い方 [IE8一部未対応]

151004_001

カルーセルスライダー Owl Carousel に、サムネイル機能を補完したプラインが Owl Carousel 2 Thumbs です。サムネイルが必要なときに便利です。

検証済みブラウザとOS

  • IE 8~ ※一部CSSは IE9 まで不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan
  • iOS 9
  • Android 4.1 / 5

 

基本コード

code

ファイルをダウンロードして、チュートリアルをコピペしつつ、コードを組んでいく。

Sass用のメディアクエリはこちらを参考。

 

ドットナビゲーションのバグ

bug

dots: false を設定してドットナビゲーションを非表示にしようとすると、バグが発生して動かなくなる。これは、ナビゲーションをコントロールするコードを流用しているためだろう。

というわけで、CSSにてドットナビゲーションを非表示にする。

コメントを投稿する

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