Is there a way in slick.js to show the dots but disable clicking on them?

Showing the dots is in a simple option dots: true . By default, the dots can be clicked to navigate through the slide-show. I want to disable this so they'll only be there to look at so you have an idea how far in the slide-show you are.

I tried this

$('.slick-dots li button').on('click', function(e){
    e.preventDefault();
    alert();
});

The alert does work after click so the selector is right but I think the preventDefault() may be overruled somewhere. Is there a nice way to disable this anyway (without hacking it by putting empty elements over the buttons)

Thank you!

Is there a way in slick.js to show the dots but disable clicking on them?

Showing the dots is in a simple option dots: true . By default, the dots can be clicked to navigate through the slide-show. I want to disable this so they'll only be there to look at so you have an idea how far in the slide-show you are.

I tried this

$('.slick-dots li button').on('click', function(e){
    e.preventDefault();
    alert();
});

The alert does work after click so the selector is right but I think the preventDefault() may be overruled somewhere. Is there a nice way to disable this anyway (without hacking it by putting empty elements over the buttons)

Thank you!

• javascript
• jquery
• css
• slideshow
• slick.js

2 Answers 2

Yes you can (just by doing small change in your code):-

 $('.slick-dots li button').on('click', function(e){
    e.stopPropagation(); // use this
});

$(".slider").slick({
  autoplay: true,
  dots: true
});

$('.slick-dots li button').on('click', function(e){
    e.stopPropagation(); // use this
});

.slider {
    width: auto;
    margin: 30px 50px 50px;
}

.slick-slide {
    background: green;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    text-align: center;
}

.slick-prev:before, 
.slick-next:before {
    color: black;    
}

.slick-dots {
    bottom: -30px;
    pointer-events: none
}

.slick-slide:nth-child(odd) {
     background: blue;
}

<link rel = "stylesheet" href="https://rawgit./kenwheeler/slick/master/slick/slick.css">
 
<link rel = "stylesheet" href="https://rawgit./kenwheeler/slick/master/slick/slick-theme.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://rawgit./kenwheeler/slick/master/slick/slick.js"></script>

<section class="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
    <div>slide4</div>
    <div>slide5</div>
    <div>slide6</div>
</section>

use css trick pointer-events: none

.slick-dots {
    bottom: -30px;
    pointer-events: none
}

SampleFiddle