ページネーションにサムネイルを設定したスライダーをslickで作成する方法
JavaScript
|
2017.08.12
今回はページネーションにサムネイルを設定したスライダーをslickで作成する方法をご紹介したいと思います。
設定方法
HTML
|
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 |
<ul class="slider slider-for"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> <li><img src="img/img06.jpg" /></li> <li><img src="img/img07.jpg" /></li> <li><img src="img/img08.jpg" /></li> <li><img src="img/img09.jpg" /></li> <li><img src="img/img10.jpg" /></li> </ul> <ul class="slider slider-nav"> <li><img src="img/img01.jpg" /></li> <li><img src="img/img02.jpg" /></li> <li><img src="img/img03.jpg" /></li> <li><img src="img/img04.jpg" /></li> <li><img src="img/img05.jpg" /></li> <li><img src="img/img06.jpg" /></li> <li><img src="img/img07.jpg" /></li> <li><img src="img/img08.jpg" /></li> <li><img src="img/img09.jpg" /></li> <li><img src="img/img10.jpg" /></li> </ul> </div> |
css
|
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 |
.slider-nav{ width: 500px; margin: 20px auto; position: relative; } .slider-nav li { margin: 0 10px; } .slider-nav .slick-prev{ border: none; background: url(./img/prev-arrow.png) center center no-repeat ; background-size: 100%; text-indent: -9999px; width: 10px; height: 16px; position: absolute; left: -40px; top: 0; bottom: 0; margin: auto; } .slider-nav .slick-next{ border: none; background: url(./img/next-arrow.png) center center no-repeat ; background-size: 100%; text-indent: -9999px; width: 10px; height: 16px; position: absolute; right: -40px; top: 0; bottom: 0; margin: auto; } @media screen and (max-width: 736px) { .slider-nav{ width: 90%; margin: 0 auto; position: relative; } .slider-nav li { margin: 0 3px; } } |
jQuery(JavaScript)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, asNavFor: '.slider-nav' }); $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', focusOnSelect: true }); }); |