在slick.js
中是否有办法显示点但禁用点击它们?
显示点是一个简单的选项dots: true
。默认情况下,可以单击点以在幻灯片放映中导航。我想禁用它,这样他们只会在那里查看,这样你就可以了解幻灯片放映的距离。
我试过这个
$('.slick-dots li button').on('click', function(e){
e.preventDefault();
alert();
});
点击后警报确实有效,所以选择器是正确的,但我认为preventDefault()
可能会在某处被推翻。有没有一种很好的方法来禁用它(不通过在按钮上放置空元素来破解它)
谢谢!
答案 0 :(得分:2)
是的,你可以(只需对代码做一些小改动): -
$('.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>
答案 1 :(得分:0)