slick.js 滑块点禁用点击但仍然显示它们

Question

在 slick.js 中有没有办法显示这些点但禁止点击它们？

显示点是在一个简单的选项中 dots: true。默认情况下，可以单击这些点来浏览幻灯片。我想禁用此功能，这样他们就只会在那里查看，这样您就可以了解自己在幻灯片放映中的进度。

我试过了

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

单击后警报确实有效，因此选择器是正确的，但我认为 preventDefault() 可能在某处被否决了。有没有一个很好的方法来禁用它（而不是通过在按钮上放置空元素来破解它）

谢谢！

Answer 1

是的，你可以（只需对代码做一些小改动）：-

 $('.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.com/kenwheeler/slick/master/slick/slick.css">
 
<link rel = "stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://rawgit.com/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>

Answer 2

使用css技巧pointer-events: none

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

SampleFiddle

slick.js 滑块点禁用点击但仍然显示它们

slick.js slider dots disable click but show them anyway

javascript

css

jquery

slideshow

slick.js