在更改Slick Slider中的幻灯片之前检查条件 [英] Check condition before changing slide in Slick Slider

问题描述

我使用这个热门轮播（ http://kenwheeler.github.io/slick/ ） ）。

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.

推荐答案

我做了一个快速修改版本的Slick，允许在下一个条件检查，参见： http://jsfiddle.net/alan0xd7/dhxhv5gg/

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

基本上滑块只会到下一个 fnCanGoNext 返回 true 。

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

我实际上在小提琴上添加了一行线＃700。

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.

由于Slick是一个开放源代码的项目，因此不需要在第一张幻灯片上点击上一页不要改变代码，适应你的需要。看看事情如何在幕后工作很有趣。

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.

希望这有助于！

这篇关于在更改Slick Slider中的幻灯片之前检查条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！