Disable pre-control on the first slide and disable Next control on the last slide

Question

using Slick and looking for a way to disable and hide the prev element until the user clicks on the next arrow. Likewise, I want the Next control to become disabled and hidden when the user reaches the last slide.

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

Does the spot already have an attribute for this, which I missed? Is it possible that this can be achieved using CSS by adding a disabled class?

The only thing I found is

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

But this is not quite what I am looking for.

Answer 1

Decision

You can add css pointer-events: none to your button. This css property disables all events on the element. So something like this.

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

And something in the same guide for the .slick-prev element.

In this solution, you should get the function from the configuration and just put a link to it with something like this.

 // Inside slick config onAfterChange: afterChange // Below somewhere var afterChange = function(slide, index) { //stuff here } 

Also check if there is a way to get the length of the slider and check it instead of hardcoding 4 in the if . Perhaps you can 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 want to do animation, you have to do it here.

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

Answer 2

Just use infite: false and create your own CSS for the slick-disabled class. For instance.

JS - jQuery

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

CSS

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

Answer 3

There is an easy way to style Prev- / Next-Buttons if the first or last item is reached. Ensure that the Infinite mode is set to false. Then create these buttons:

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

That is all you need!

Answer 4

I changed the behavior of slick.js right like this:

 // 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 use the jquery .css() method and set display . It seems to work pretty badly.

Answer 5

Another way to do this is to slide onto the same slide while scrolling (previous) on the first slide or swipe (further) on the last slide. Use the swiper method swiper.SlideTo (n, n, m);

Answer 6

A very simple solution:

• set the value of infinity to false. eg,

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

• add the following css

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

and that’s it.