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

Question

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

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?

The only thing similar I have found is this

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

But its not exactly what I am looking for.

Answer 1

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')
       }
   }

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 }

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

---

Edit

Here's how to implement the afterChange() function.

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

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

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

Answer 2

Just use infite: false and create a custom css for class slick-disabled. Eg.

JS - jQuery

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

CSS

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

Answer 3

There is a simple Way to style the Prev-/Next-Buttons if the first or last Item is reached. Make shure that the Infinite Mode is set to false. Then style the Buttons like this:

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

That's all you need!

Answer 4

Add CSS code:

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

Answer 5

A very simple solution is:

1. set the infinite to false. eg

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

2. add the following css

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

and that is it.

Answer 6

I modified the behavior of slick.js directly, like so:

// 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!
}

And:

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', '');
    }
}

Just a matter of using the jquery .css() method and setting display. Seems to work quite dandily.

Answer 7

another way to do it is to slide to the same slide when you swipe(previous) on the first slide or swipe(next) on the last slide. Use swiper method swiper.SlideTo(n,n,m);