在第一张幻灯片上禁用Prev Control并在最后一张幻灯片上禁用Next控件 [英] Disable Prev Control on first slide and disable Next control on last slide

问题描述

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

using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrow. Similarly I want the Next control to become disabled and hidden once the user reaches the last slide.

我想要完成的一个很好的例证是这里

A good illustration of what I'm trying to accomplish is here

光滑是否已经为此忽略了属性？这是否可以通过添加禁用类使用CSS来实现？

Does slick have an attribute already for this that I have overlooked? Is this something that maybe can be accomplished using CSS by adding a disabled class?

我发现的唯一类似的是

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

但这不是我想要的。

推荐答案

解决方案

您可以将css 指针 - 事件：无添加到按钮那个css属性禁用了一个元素上的所有事件。就像这样。

Solution

You can add the css pointer-events: none to your button. That css property disable all event on an element. So something like that.

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

以及 .slick-prev 元素的相同指南中的内容。

And something on the same guideline for .slick-prev element.

在该解决方案中，您应该获得功能超出配置，只用这样的东西引用它。

In that solution you should get the function out of the config and only put a reference to it with something like this.

// Inside slick config
onAfterChange: afterChange

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

还要检查是否有办法获取滑块的长度并验证它而不是硬编码 4 中的code> if 语句。您可以执行类似 $（'。slide'）的操作。长度

Also check to see if there is a way to get the length of the slider and verify it instead of hardcoding 4 in the if statement. You can probably do something like $('.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，如果你想做动画，你应该在这里做。

And some CSS, If you wanna do animation you should do it here.

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

这篇关于在第一张幻灯片上禁用Prev Control并在最后一张幻灯片上禁用Next控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！