Owl Carousel 2 Thumbs を使う [IE8一部未対応]
検証済みブラウザとOS
- IE 8~ ※一部CSSは IE9 まで不可
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X El Capitan
- iOS 9
- Android 4.1 / 5
基本コード
ファイルをダウンロードしてチュートリアルをコピペしつつ、コードを組んでいく。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/owl.carousel.css"> <link rel="stylesheet" href="css/owl.theme.css"> <link rel="stylesheet" href="css/top.css"> </head> <body> <ul class="owl-carousel"> <li><img src="images/ph_001.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_002.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_003.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_004.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_005.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <!-- /.owl-carousel --></ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/owl.carousel.js"></script> <script src="js/OwlCarousel2Thumbs.min.js"></script> <script src="js/owl.carousel.handle.js"></script> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | .owl-carousel { width: 800px; margin: 0 auto; @include max(800) { width: 100% } li { position: relative; margin-bottom: 10px; } p { width: 100%; color: white; position: absolute; left: 0; bottom: 0; padding: 20px; background: rgba(0,0,0, 0.5); } button { border: 0; padding: 0; } } /* * サムネイル */ .owl-thumb-item { img { width: 100px; height: auto; @include max(480) { width: 80px; } } } .owl-thumbs { text-align: center; } .owl-thumb-item { cursor: pointer; margin: 0 5px; background: none; @include opacity(1); &.active { @include opacity(0.3); } } /* * ドットナビゲーション */ .owl-controls { display: none; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(function(){ $('.owl-carousel').owlCarousel({ autoplay: true, autoplayHoverPause: true, autoplayTimeout: 3000, autoplaySpeed: 1000, items: 1, loop: true, thumbs: true, thumbImage: true, thumbContainerClass: 'owl-thumbs', thumbItemClass: 'owl-thumb-item' }); }); |
Sass用のメディアクエリはこちらを参考。
ドットナビゲーションのバグ
dots: false を設定してドットナビゲーションを非表示にしようとすると、バグが発生して動かなくなる。
これは、ナビゲーションをコントロールするコードを流用しているためだろう。
というわけで、CSSにてドットナビゲーションを非表示にする。
1 2 3 | .owl-controls { display: none; } |
コメントを投稿する