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:
$('.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!
You can style slick dots with CSS only and avoid using inline images:
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);
}