javascript - 光滑的 slider 自定义点

Question

我想知道是否有办法使用自定义光滑 slider 点。当我搜索时，我只能找到有关如何将幻灯片中的点更改为缩略图的示例，但这不是我想要完成的。我只想将自己的 png 图片用于事件和非事件点导航。我试过这个:

    $('.slick-dots li').html('<a href="#"><img src="slide-dot.png" /></a>');
    $('.slick-dots li.slick-active').html('<a href="#"><img src="slide-dot-active.png" /></a>');

但这没有用，尽管我记得我以前做过类似的事情。我在这里遗漏了什么吗？

谢谢!

Answer 1

这可以在将 slick 初始化为选项之一时完成:

JS

$(".slider").slick({
    dots: true,
    customPaging : function(slider, i) {
        return '<a href="#"><img src="slide-dot.png" /><img src="slide-dot-active.png" /></a>';
    },
});

然后你就可以根据激活状态用CSS显示你想要的图片了

<!-- language: lang-css -->

.slick-dots li img:nth-child(1) {
    display: block;
}

.slick-dots li img:nth-child(2) {
    display: none;
}

.slick-dots li.slick-active img:nth-child(1) {
    display: none;
}

.slick-dots li.slick-active img:nth-child(2) {
    display: block;
}