滑动滑块自定义点

Question

我想知道是否有方法使用自定义滑块点。当我搜索时，我能找到的所有例子都是关于如何将幻灯片中的点变成缩略图的示例，但这不是我想要完成的。我只想使用我自己的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

您可以使用CSS设计样式，避免使用内嵌图像：

使用背景图片：

.slick-dots li button { 
    background: url(path/to/your-image.png); 
    text-indent: -9999px; 
    overflow:hidden; 
    /* more CSS */ 
} 

使用伪元素：

.slick-dots li button { 
    font-size: 0; 
    /* more CSS */ 
} 
.slick-dots li button { 
    content:url(path/to/your-image.png); 
} 

Answer 2

初始化滑块时，可以使用“appendDots”选项。 例如：appendDots： '（你点 '）' $'

Answer 3

这可以初始化光滑作为其中的一个选项时进行：

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的活动状态显示想要的图像

.slick-dots li a:nth-child(1) { 
    display: block; 
} 
.slick-dots li a:nth-child(2) { 
    display: none; 
} 
.slick-dots li.slick-activeactive a:nth-child(1) { 
    display: none; 
} 
.slick-dots li.slick-activeactive a:nth-child(2) { 
    display: block; 
}