Owl Carousel 2 をカスタマイズ
2018/09/30 公式サイトでは最新ver 2.3.4が公開されています。
基本カスタマイズ
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 | <head> <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><a href=""><img src="images/ph_001.jpg" width="800" height="500" alt=""> <p>テキスト</p></a></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> <li><img src="images/ph_006.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_007.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_008.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_009.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <li><img src="images/ph_010.jpg" width="800" height="500" alt=""> <p>テキスト</p></li> <!-- /.owl-carousel --></ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/owl.carousel.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 | .owl-carousel { width: 1000px; margin: 0 auto; @include max(1024) { width: 90%; } } .owl-theme .owl-controls .owl-nav .owl-prev, .owl-theme .owl-controls .owl-nav .owl-next { @include fs(32); position: absolute; top: 25%; margin: 0; padding: 0 20px; transform: scaleX(0.5); @include max(640) { padding: 0 10px; } } .owl-theme .owl-controls .owl-nav .owl-prev { left: -60px; @include max(640) { left: -30px; } } .owl-theme .owl-controls .owl-nav .owl-next { right: -60px; @include max(640) { right: -30px; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(function(){ $(".owl-carousel").owlCarousel({ autoplay: true, autoplayHoverPause: true, autoplayTimeout: 2000, loop: true, margin: 20, nav: true, responsive: { 0: { items: 2 }, 640: { items: 3 } } }); }); |
ドットナビゲーション
2018/09/30 最新ver 2.3.4では修正されているようなので、ソースからのコピペは不要かもしれません。
ドットナビゲーションはデフォルトで true のはずなのに、なぜか表示されない。
原因はダウンロードしたzipファイルに公式サイトのCSSが含まれていないため。
というわけで、公式ページのソースからコピペ。
1 | .owl-theme .owl-controls{margin-top:10px;text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-controls .owl-nav [class*=owl-]{color:#fff;font-size:14px;margin:5px;padding:4px 7px;background:#d6d6d6;display:inline-block;cursor:pointer;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{background:#869791;color:#fff;text-decoration:none}.owl-theme .owl-controls .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1;*display:inline}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#d6d6d6;display:block;-webkit-backface-visibility:visible;-webkit-transition:opacity 200ms ease;-moz-transition:opacity 200ms ease;-ms-transition:opacity 200ms ease;-o-transition:opacity 200ms ease;transition:opacity 200ms ease;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} |
前へ次へボタン
上記 SCSS 10行目以降
レスポンシブデザイン
上記 owl.carousel.handle.js 9行目以降
自動カルーセル
上記 owl.carousel.handle.js 3~5行目
左右が見えるセンター寄せ
HTMLは上記「基本カスタマイズ」と同様。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .owl-carousel {} .owl-theme .owl-controls .owl-nav .owl-prev, .owl-theme .owl-controls .owl-nav .owl-next { @include fs(32); position: absolute; top: 10%; margin: 0; padding: 50px 20px; transform: scaleX(0.5); @include max(640) { padding: 0 10px; } } .owl-theme .owl-controls .owl-nav .owl-prev { left: 0; } .owl-theme .owl-controls .owl-nav .owl-next { right: 0; } |
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $(".owl-carousel").owlCarousel({ autoplay: true, autoplayHoverPause: true, autoplayTimeout: 2000, center: true, items: 2, loop: true, margin: 20, nav: true }); }); |
アイキャッチ 横幅100%
1 2 3 4 5 6 7 8 9 10 11 12 | <ul class="owl-carousel"> <li class="one">テキスト</li> <li class="two">テキスト</li> <li class="three">テキスト</li> <li class="four">テキスト</li> <li class="five">テキスト</li> <li class="six">テキスト</li> <li class="seven">テキスト</li> <li class="eight">テキスト</li> <li class="nine">テキスト</li> <li class="ten">テキスト</li> <!-- /.owl-carousel --></ul> |
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 64 65 | .owl-carousel { li { color: white; height: 500px; padding: 30px; @include max(1024) { height: 300px; } } .one { background: url(../images/bg_01.jpg) no-repeat bottom; background-size: cover; } .two {background: darkred;} .three { background: url(../images/bg_02.jpg) no-repeat center; background-size: cover; } .four {background: darkgreen;} .five { background: url(../images/bg_03.jpg) no-repeat center; background-size: cover; } .six {background: darkblue;} .seven { background: url(../images/bg_04.jpg) no-repeat center; background-size: cover; } .eight {background: purple;} .nine { background: url(../images/bg_05.jpg) no-repeat center; background-size: cover; } .ten {background: gray;} } .owl-theme .owl-controls .owl-nav .owl-prev, .owl-theme .owl-controls .owl-nav .owl-next { @include fs(32); position: absolute; top: 35%; margin: 0; padding: 50px 20px; transform: scaleX(0.5); @include max(640) { padding: 0 10px; } } .owl-theme .owl-controls .owl-nav .owl-prev { left: 0; } .owl-theme .owl-controls .owl-nav .owl-next { right: 0; } |
1 2 3 4 5 6 7 8 9 10 11 | $(function(){ $(".owl-carousel").owlCarousel({ autoplay: true, autoplayHoverPause: true, autoplayTimeout: 3000, autoplaySpeed: 1000, items: 1, loop: true, nav: true }); }); |
フルブラウザ
float を解除したり高さを相対指定で調整するのは面倒なので、vh(viewport height)を使う。
- リストタグで設置する場合、li に 100vh を指定すればOK
- ドットナビゲーションには、ネガティブマージンと z-index を指定
HTMLは上記「アイキャッチ 横幅100%」と同様。
SCSSも大方のコードは同様。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .owl-carousel { li { height: 100vh; color: white; padding: 30px; } } .owl-dots { margin: -50px 0 0; position: relative; z-index: 9; } |
1 2 3 4 5 6 7 8 9 10 11 | $(function(){ $(".owl-carousel").owlCarousel({ autoplay: true, autoplayHoverPause: true, autoplayTimeout: 3000, autoplaySpeed: 1000, items: 1, loop: true, nav: true }); }); |
コメントを投稿する