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

Question

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

很好地说明了我要实现的目标

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

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

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

但这并不是我想要的。

Answer 1

解决方案

您可以将 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 }

还要检查是否有办法获取滑块的长度并验证它，而不是在 if 语句中硬编码 4。你可以做类似 $('.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; }

Answer 2

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

JS - jQuery

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

CSS

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

Answer 3

我直接修改了 slick.js 的行为，像这样：

// making the prevArrow not show on init:
if (_.options.infinite !== true) {
    _.$prevArrow
    .addClass('slick-disabled')
    .attr('aria-disabled', 'true')
    .css('display', 'none'); // The new line of code!
}

并且：

if (_.options.arrows === true &&
    _.slideCount > _.options.slidesToShow &&
    !_.options.infinite
) {
    _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');

    if (_.currentSlide === 0) {
        _.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    } else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
        _.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
        _.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
    }
}

只需使用 jquery .css() 方法并设置 display 即可。似乎工作得很好。

Answer 4

另一种方法是在第一张幻灯片上滑动（上一张）或最后一张幻灯片上滑动（下一张）时滑动到同一张幻灯片。使用刷卡方法 swiper.SlideTo(n,n,m);

Answer 5

如果到达第一个或最后一个项目，有一种简单的方法可以设置 Prev-/Next-Buttons 的样式。确保将 Infinite Mode 设置为 false。然后像这样设置按钮样式：

.slick-arrow[aria-disabled="true"]{
 opacity: .5;
}

这就是您所需要的！

Answer 6

一个非常简单的解决方案是：

将无限设为假。例如

$('.my-slider').slick({
 infinite: false });

添加以下内容css

.slick-disabled { display: none; pointer-events:none; }

就是这样。

Answer 7

添加CSS代码：

.slick-disabled {
    display: none !important;
}

Answer 8

各位，

放

 arrows: false,

在设置 JSON 配置中。就这么简单！！

Answer 9

Slick Slider 设置中的非常简单的解决方案

$('.my-slider').slick({
     infinite: false 
});

以上设置将禁用 PREV 和 NEXT 箭头。但是要隐藏禁用的箭头，您需要在 CSS:

以下

.slick-disabled {
    display: none !important;
}

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

Disable Prev Control on first slide and disable Next control on last slide

javascript

jquery

slick.js

解决方案

编辑