我有一个带有缩略图的圆滑的滑块,作为点导航,但是拇指未定义。这是我的代码。任何帮助将不胜感激!
<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
}
}]
});
答案 0 :(得分: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>