滑動滑塊自定義點

Question

我想知道是否有方法使用自定義滑塊點。當我搜索時，我能找到的所有例子都是關於如何將幻燈片中的點變成縮略圖的示例，但這不是我想要完成的。我只想使用我自己的PNG圖片進行活動和非活動的點導航。我試過這個：

$('.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>'); 

但這並沒有奏效，但我記得我之前做過類似的事情。我在這裏錯過了什麼嗎？

謝謝！

Answer 1

您可以使用CSS設計樣式，避免使用內嵌圖像：

使用背景圖片：

.slick-dots li button { 
    background: url(path/to/your-image.png); 
    text-indent: -9999px; 
    overflow:hidden; 
    /* more CSS */ 
} 

使用僞元素：

.slick-dots li button { 
    font-size: 0; 
    /* more CSS */ 
} 
.slick-dots li button { 
    content:url(path/to/your-image.png); 
} 

Answer 2

初始化滑塊時，可以使用「appendDots」選項。 例如：appendDots： '（你點 '）' $'

Answer 3

這可以初始化光滑作爲其中的一個選項時進行：

JS

$(".slider").slick({ 
    dots: true, 
    customPaging : function(slider, i) { 
     return '<a href="#"><img src="slide-dot.png" /><img src="slide-dot-active.png" /></a>'; 
    }, 
}); 

然後你就可以根據CSS的活動狀態顯示想要的圖像

.slick-dots li a:nth-child(1) { 
    display: block; 
} 
.slick-dots li a:nth-child(2) { 
    display: none; 
} 
.slick-dots li.slick-activeactive a:nth-child(1) { 
    display: none; 
} 
.slick-dots li.slick-activeactive a:nth-child(2) { 
    display: block; 
}