光滑的滑块拇指未显示

Question

我有一个带有缩略图的光滑滑块作为点导航，但拇指未定义。 这是我的代码。 任何帮助是极大的赞赏！

<section class="slider">
<div data-thumb="images/3white.svg?$staticlink$"><img src="images/cutaway3.png?$staticlink$"></div>
<div data-thumb="images/4white.svg?$staticlink$"><img src="images/cutaway4.png?$staticlink$"></div>
<div data-thumb="images/5white.svg?$staticlink$"><img src="images/cutaway5.png?$staticlink$"></div>
<div data-thumb="images/6white.svg?$staticlink$"><img src="images/cutaway6.png?$staticlink$"></div>
<div data-thumb="images/7white.svg?$staticlink$"><img src="images/cutaway7.png?$staticlink$"></div>
<div data-thumb="images/8gray.svg?$staticlink$"><img src="images/cutaway8.png?$staticlink$"></div>
<div data-thumb="images/9gray.svg?$staticlink$"><img src="images/cutaway9.png?$staticlink$"></div>
<div data-thumb="images/Pgray.svg?$staticlink$"><img src="images/cutawayP.png?$staticlink$"></div>
</section>

<script type="text/javascript">
$(".slider").slick({

autoplay: false,
dots: true,
customPaging : function(slider, i) {
    var thumb = $(slider.$slides[i]).data('thumb');
    return '<a><img src="'+thumb+'"></a>';
},

responsive: [{ 
    breakpoint: 500,
    settings: {
        dots: false,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2
    } 
}]
});

Answer 1

这是一个可以帮助您的示例：

 $('.slider').slick({ autoplay: false, dots: true, customPaging: function(slider, i) { var thumb = $(slider.$slides[i]).data('thumb'); return '<a><img width="20" src="' + thumb + '"></a>'; }, responsive: [{ breakpoint: 500, settings: { dots: false, arrows: false, infinite: false, slidesToShow: 2, slidesToScroll: 2 } }] });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"> <section class="slider"> <div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div> <div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div> <div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div> <div data-thumb="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"><img src="https://images.freeimages.com/images/small-previews/819/why-hello-1376445.jpg"></div> <div data-thumb="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"><img src="https://images.freeimages.com/images/small-previews/5ae/grape-vine-leaf-1327453.jpg"></div> <div data-thumb="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"><img src="https://images.freeimages.com/images/small-previews/a61/vikingland-1316664.jpg"></div> </section>