I am using this popular carousel (/).

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.

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.

• javascript
• jquery
• html
• css
• carousel

• 1 api is here: github./kenwheeler/slick. You need the beforeChange event probably bined with the slickPause method – Pete Commented May 1, 2015 at 13:24
• slickPause only stops autoplay, not playing of next slide. – darKnight Commented May 2, 2015 at 17:07

1 Answer 1

I made a quick modified version of Slick that allows for condition checking when going next, see: http://jsfiddle/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!