Check condition before changing slide in Slick Slider

Question

I am using this popular carousel (http://kenwheeler.github.io/slick/).

I have placed certain elements inside each slide. At least one of these elements must be selected by the user before moving to the next slide. But I cannot figure out how to prevent the user from manually moving to next slide by clicking the 'next' arrow before selecting an element.

I know that 'next/previous' arrows can be disabled but I do not want to do that as the user might want to go back to previous slide to change his option.

I know that one option is to disable default arrows and introduce my own prev/next arrows and then bind slide changing functionality to it along with condition checking. But it would be great if there is some built-in option in this slider (which I am not able to figure out) as it would minimize my effort.

Solution

I made a quick modified version of Slick that allows for condition checking when going next, see: http://jsfiddle.net/alan0xd7/dhxhv5gg/

Basically the slider will only go to next if fnCanGoNext returns true.

I've only actually added one line around line #700 on the fiddle. It doesn't handle things like clicking on "previous" when on first slide, but you can probably work from here.

Since Slick is an open source project, don't be afraid to change the code and adapt it to suit your needs. It is fun to see how things work behind the scenes.

Hope this helps!

Comments

[darKnight]

I am modifying your code in my project but its not working. Basically, I have several radio buttons in each slide, and each radio button has a class 'r-button'. I am writing var checkbox = currentSlide.find(".r-button"); if (checkbox.is(':checked')) { return true; }. But this is not working as fnCanGoNext is always returning false even if a radio button is checked. Where am I going wrong?

[JimmyB]

Thanks for this solution. Saved me a couple of hours that!

[Razinar]

@alan0xd7 i desperately need your help. First of all thanks for the jsfiddle, i started from here to check condition before clicking on arrows in slick slider. Now, i'm getting headache finding a way to check condition on slide click in an infinite center mode slider. What i'm trying to do is to check condition on slide click, stopping or letting slick to change slide. I need the same behaviour you suggested for arrows, but for the click event. Help me please