在Slick Slider中更改幻灯片之前检查条件

时间:2015-05-01 12:27:35

标签: javascript jquery html5 css3 carousel

我正在使用这个受欢迎的轮播(http://kenwheeler.github.io/slick/)。

我已在每张幻灯片中放置了某些元素。在移动到下一张幻灯片之前,用户必须至少选择其中一个元素。但我无法弄清楚如何通过点击下一步'来防止用户手动移动到下一张幻灯片。选择元素之前的箭头。

我知道' next / previous'箭头可以被禁用,但我不想这样做,因为用户可能想要回到上一张幻灯片来更改他的选项。

我知道一个选项是禁用默认箭头并引入我自己的上一个/下一个箭头,然后将滑动更改功能与条件检查绑定在一起。但是如果这个滑块中有一些内置选项(我无法弄清楚)会很好,因为它可以最大限度地减少我的努力。

1 个答案:

答案 0 :(得分:4)

我做了一个Slick的快速修改版本,允许在下一步进行条件检查,请参阅:http://jsfiddle.net/alan0xd7/dhxhv5gg/

基本上,如果fnCanGoNext返回true,滑块将仅转到下一个。

我实际上只是在小提琴上的#700行附近添加了一行。它不处理在第一张幻灯片上点击“上一页”的内容,但你可以在这里工作。

由于Slick是一个开源项目,所以不要害怕更改代码并根据您的需要进行调整。看看事情在幕后如何运作很有趣。

希望这有帮助!