Slick slider custom dots

Question

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!

Answer 1

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

Answer 2

This can be done when initializing slick as one of the options:

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

<!-- 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;
}

Answer 3

you can use the option "appendDots" when initializing the slider. For example: appendDots: '$('.your-dot')'

Answer 4

Hello there i searched a lot but didn't find any solution so i created my own solution

you can do like this:

In html

<div class="card rounded-0 h-100">
    <div class="card-body p-0">
        <div id="slick-slider">
            <a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/kYLM906MNqYcHvm0bHLcIj3TxldjZfySHl26wHMu.png" alt=""></a>
            <a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/ppB6tYYNgWM3vL3uq81n80fZCdxrgkMul9KPk9pm.png" alt=""></a>
            <a href="#"><img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/Dp0DBHFbBuyRCAUi8Od6tk4izOsMg1mVB1v8QAeu.png" alt=""></a>
        </div>
        <div class="slick-slider-nav"></div>
        <div class="slick-slider-dots"></div>
    </div>
</div>

And in javascript

$('#slick-slider').slick({
    autoplay: true,
    dots: true,
    appendArrows: $('.slick-slider-nav'),
    appendDots: $('.slick-slider-dots'),
    prevArrow: "<button class='slick-prev btn btn-white rounded-circle'><i class='mdi mdi-chevron-left'></i></button>",
    nextArrow: "<button class='slick-next btn btn-white rounded-circle'><i class='mdi mdi-chevron-right'></i></button>",
});

For dots style like this i am using SCSS

.slick-slider-dots{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;

    ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            margin: 0 4px;
            button {
                background: $gray-200;
                height: 8px;
                width: 35px;
                overflow: hidden;
                color: $gray-200;
                border: none;
                border-radius: 4px;
            }
            &.slick-active {
                button {
                    background: $primary;
                    color: $primary;
                }
            }
        }
    }

}

Dots will look like this

Answer 5

You can implement this simply by using CSS, and you don't need any JavaScript function.

1- choose the element you want the slider to be applied to

this code is pugjs

ul
  li 01
  li 02
  li 03
  li 04
  li 05

2- Then apply the Slider function to this element

$("ul").slick()

3- Now add the dot feature to the slider and do it with true

$("ul").slick({
  dots: true,
})

4- Now go to the points and click on them and open the console and drag the class named slick-dots

5- Add the formatting you want to the buttons inside, as shown in the following figure

.slick-dots li button
{
  width:10px;height:10px;
  background-color:red;border-radius:50%;
  font-size:0px; // This step is very important to hide the numbers
  border:0;
}

6- Now inside the console, you will notice the mechanism of action of this slider, as it puts an active class on the element that you click on, so we go to the css and we coordinate the active

.slick-dots .slick-active button
{
  background-color:blue;
}

7- And in this way, you will end the customization of dot without the need for any JavaScript function.