javascript - 在第一张幻灯片上禁用 Prev 控件并在最后一张幻灯片上禁用 Next 控件

Question

使用 Slick 并寻找一种方法来禁用和隐藏 prev 控件，直到用户单击下一个箭头。同样，我希望 Next 控件在用户到达最后一张幻灯片后被禁用和隐藏。

here 是我试图完成的一个很好的例子。

slick 是否已经具有我忽略的属性？这是否可以通过添加禁用类使用 CSS 来完成？

我发现的唯一类似的是这个

$('.pages .slider').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    infinite: false,
    onAfterChange: function(slide, index) {
        if(index == 4){
        $('.pages .slider').slickPause();

但这并不是我想要的。

Answer 1

只需使用 infite: false 并为 slick-disabled 类创建自定义 CSS。例如。

JS - jQuery

$('.my-slider').slick({
    infinite: false,
    slidesToShow: 1,
    slidesToScroll: 1
});

CSS

.slick-disabled {
    opacity: 0;
    pointer-events:none;
}