Question

149

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

rated 0 times [ 150] [ 1] / answers: 1 / hits: 58077 / 9 Years ago, wed, november 18, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

angelicajayleneh

Add To Favorites

Follow

Total Points: 216

Total Questions: 110

Total Answers: 100

Location: Sudan

Member since Tue, Aug 3, 2021

3 Years ago

answered 9 Years ago melinal · Accepted Answer

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;

}