Javascript 光滑的滑块自定义点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42554873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick slider custom dots
提问by Maartje
I was wondering if there is a way to use custom slick slider dots. When I search, all I can finds is examples on how to change the dots into thumbnails from the slides, however this is not what I'm trying to accomplish. I just want to use my own png pictures for the active and non-active dot navigation. I tried this:
我想知道是否有办法使用自定义的光滑滑块点。当我搜索时，我能找到的只是关于如何将幻灯片中的点更改为缩略图的示例，但这不是我想要完成的。我只想使用我自己的 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>');
But that didn't work, though I recall I did something like that before. Am I missing something here ?
但这不起作用，尽管我记得我以前做过类似的事情。我在这里错过了什么吗？
Thanks!
谢谢！
回答by Josh Sanger
This can be done when initializing slick as one of the options:
这可以在将 slick 初始化为选项之一时完成：
JS
JS
$(".slider").slick({
dots: true,
customPaging : function(slider, i) {
return '<a href="#"><img src="slide-dot.png" /><img src="slide-dot-active.png" /></a>';
},
});
Then you can display the image you want based on the active state with CSS
然后你就可以用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;
}
回答by claudiomedina
You can style slick dots with CSS only and avoid using inline images:
您可以仅使用 CSS 设置光滑点的样式，并避免使用内嵌图像：
Using background image:
使用背景图片：
.slick-dots li button {
background: url(path/to/your-image.png);
text-indent: -9999px;
overflow:hidden;
/* more CSS */
}
Using pseudo element:
使用伪元素：
.slick-dots li button {
font-size: 0;
/* more CSS */
}
.slick-dots li button {
content:url(path/to/your-image.png);
}
回答by vuquanghoang
you can use the option "appendDots" when initializing the slider. For example: appendDots: '$('.your-dot')'
您可以在初始化滑块时使用选项“appendDots”。例如： appendDots: '$('.your-dot')'
