ページネーションにサムネイルを設定したスライダーをslickで作成する方法

2017/08/12
  • JavaScript
ページネーションにサムネイルを設定したスライダーをslickで作成する方法

今回はページネーションにサムネイルを設定したスライダーをslickで作成する方法をご紹介したいと思います。

設定方法

HTML

             
 <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

.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)

       
$(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
    });
});