Question

157

Slick slider custom dots

rated 0 times [ 158] [ 1] / answers: 1 / hits: 101228 / 7 Years ago, thu, march 2, 2017, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyonna

Add To Favorites

Follow

Total Points: 521

Total Questions: 104

Total Answers: 96

Location: Samoa

Member since Tue, May 3, 2022

2 Years ago

answered 7 Years ago leslijessalyng · Accepted Answer

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);

}