0

我正在使用 Cycle2 ( http://jquery.malsup.com/cycle2/ ) 在网站上创建类似向导的导航。我希望在单击下一个按钮时验证当前幻灯片，然后再转换到下一张幻灯片。

我已经尝试触发cycle-before事件并执行我的条件，但我不知道如何实际停止转换。类似的命令.cycle('stop')在触发时似乎不起作用cycle-before- 它继续到下一张幻灯片。

在允许使用下一个按钮之前，我需要验证幻灯片中的一些输入字段。

当前设置是：

<div id="questions" class="cycle-slideshow"
         data-allow-wrap="false"
         data-cycle-caption="#question-progress"
         data-cycle-caption-template="Question {{slideNum}} of {{slideCount}}"
         data-cycle-slides="div.question"
         data-cycle-fx="scrollHorz"
         data-cycle-timeout="0"
         data-cycle-next="#next-question">

         <div class="question"> ... </div>
         <div class="question"> ... </div>
         <div class="question"> ... </div>

</div>

<a id="next-question" href="#">Next question</a>

有任何想法吗？

4

1 回答 1

1

我这样做的方法是data-cycle-next="#next-question"从您的幻灯片定义中删除 ，而是在Next Question按钮上编写您自己的单击处理程序。这样，在您知道数据有效之前，您不会开始转换。

$('#next-question').click(function(){
  //Do validation

  //If valid, go to next slide
      $('.cycle-slideshow').cycle('next');
});
于 2014-03-10T20:39:49.163 回答