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

Question

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

我想要完成的一个很好的例子就在这里

光滑是否已经为此我忽略了一个属性？这是否可以通过添加禁用类使用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;
}

Answer 2

解

您可以将css添加pointer-events: none到按钮中.该css属性禁用元素上的所有事件.所以这样的事情.

// Slick stuff
   ...
   onAfterChange: function(slide, index) {
       if(index === 4) {
           $('.slick-next').css('pointer-events', 'none')
       }
       else {
           $('.slick-next').css('pointer-events', 'all')
       }
   }

还有一些关于.slick-prev元素的指导原则.

在该解决方案中,您应该从配置中获取该功能,并仅使用类似的内容对其进行引用.

// Inside slick config
onAfterChange: afterChange

// Below somewhere
var afterChange = function(slide, index) { //stuff here }

还要检查是否有办法获取滑块的长度并4在if语句中验证它而不是硬编码.你可能会做类似的事情$('.slide').length

编辑

以下是如何实现该afterChange()功能.

$(document).ready(function(){
    $('.scrollable').slick({
        dots: false,
        slidesToShow: 1,
        slidesToScroll: 3,
        swipeToSlide: true,
        swipe: true,
        arrows: true,
        infinite: false,
     });

     $('.scrollable').on('afterChange', function (event, slick, currentSlide) {

        if(currentSlide === 2) {
            $('.slick-next').addClass('hidden');
        }
        else {
            $('.slick-next').removeClass('hidden');
        }

        if(currentSlide === 0) {
            $('.slick-prev').addClass('hidden');
        }
        else {
            $('.slick-prev').removeClass('hidden');
        }  
    })
});

还有一些CSS,如果你想做动画,你应该在这里做.

.slick-prev.hidden,
.slick-next.hidden {
    opacity: 0;
    pointer-events:none;
}