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!

Dalt

any console error? – Cheboksary

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

Hypothermia

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

Abdominous

Can you please make any jsfiddle or codepen to understand in easy way? – Katushka

Do you have an active code example to build off of? That's probably the better way of helping. – Abdominous

Note if you're an idiot like me you need to use the <a> tags in the returned HTML. – Rash

Answer 3

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

Disaffection

very cool one! Thanks for sharing. Where are the icons from? – Knesset

@StefanYYC which icons you are talking about? – Disaffection

this one <i class='mdi mdi-chevron-right'></i> – Knesset

@StefanYYC They are the material design icons you can get from this cdn <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css"/> – Disaffection

Answer 4

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

Uncurl

doesn't this just specify under which element the dots are added? – Unquote

thx, appendDots attaches the dots into desired location – Brietta

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.

Lime

Answer 6

Hi Maybe this is an old question but you can fully create your own HTML + CSS dot list. You can bind then using jQuery:

Create a demo slider:

<div class="slick-slider" id="mySliderId">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

Create a the dots:

<a href="#" class="changeSlider" 
data-slider="mySliderId" 
data-slide="0">Dot for Slide #1</a>

<a href="#" class="changeSlider" 
data-slider="mySliderId" 
data-slide="1">Dot for Slide #2</a>

<a href="#" class="changeSlider" 
data-slider="mySliderId" 
data-slide="2">Dot for Slide #3</a>

Create a jQuery controller:

/**
 * If custom created dots
 */
$(document.body).on('click', '.changeSlider', function (e) {

    e.preventDefault();

    var dot = $(this);

    var slider = dot.data('slider');
    var slide = dot.data('slide');

    $('#' + slider).slick('slickGoTo', slide);
    return false;
});

Amandie