slick.jsスライダードットはクリックを無効にしますが、とにかくそれらを表示します

Question

slick.jsにドットを表示しますが、無効にする方法はありますか？

ドットを表示するのは簡単なオプションdots: trueです。デフォルトでは、ドットをクリックしてスライドショーをナビゲートできます。私はこれを無効にして、見ているだけになるので、あなたがスライドショーでどのくらい遠くにあるかを知ることができます。

私はセレクタが正しいですが、私はpreventDefault()がどこか却下することができると思いますので、アラートがクリックした後に動作しない

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

これを試してみました。とにかくこれを無効にする良い方法はありますか（ボタンの上に空の要素を置いてハッキングすることなく）

ありがとう！

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