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

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 2

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