gwar9 gwar9 - 2 months ago 30x
Javascript Question

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

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.



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


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

        dots: false,
        slidesToShow: 1,
        slidesToScroll: 3,
        swipeToSlide: true,
        swipe: true,
        arrows: true,
        infinite: false,

     $('.scrollable').on('afterChange', function (event, slick, currentSlide) {

        if(currentSlide === 2) {
        else {

        if(currentSlide === 0) {
        else {

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

.slick-next.hidden {
    opacity: 0;