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

A

10

16

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.

Aculeate answered 18/11, 2015 at 20:19 Comment(0)

S

14

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;
}

Sagacious answered 18/11, 2015 at 20:47 Comment(8)

this is so very close, when I implement this solution however my slider breaks out of its container. There are 3 slides each slide has 3 rows of 5. Here is a fiddle to illustrate jsfiddle.net/gward90/b25jgyox/4 – Aculeate 18/11, 2015 at 21:18

I added an edit on how to implement the after change function, I couldn't edit the fiddle for some reasons. – Sagacious 18/11, 2015 at 23:51

The same issue of the slider breaking is happening @Raphael Parent – Aculeate 19/11, 2015 at 19:11

Can you make the fiddle work like before. I'll try and make it work from that. – Sagacious 19/11, 2015 at 20:13

thanks jsfiddle.net/gward90/b25jgyox/8 Make sure the fiddle run window is greater than 768px the arrows will only show up there. – Aculeate 19/11, 2015 at 20:53

Ok I edited my answer with the right code. I have problem with JSFiddle so I can't update your fiddle I'm sorry for that. – Sagacious 19/11, 2015 at 21:33

Thank you very much, this gives me plenty to work from I will customize as necessary. – Aculeate 20/11, 2015 at 14:35

Next time, give a little more research in the documentation of what you are using. There was no onAfterChange property but it was an event. It could have saved us both time but I'm happy I could help :) – Sagacious 20/11, 2015 at 14:37

I

36

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;
}

Insolvable answered 16/8, 2016 at 23:22 Comment(3)

is it true that in ie10 pointer-events:none; doesn't work? So in this old browser how could I disable effectively the arrow? – Peevish 10/7, 2018 at 15:51

This was a very easy solution to implement. Thanks! – Fermin 13/5, 2019 at 15:45

This is the best and easiest solution. – Albright 5/11, 2019 at 13:14

S

14