Проверка слайда перед переходом

Question

Проверка слайда перед переходом

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>

Есть идеи?

janhartmann 08 март 2014, в 23:14

Источник

Теги:

jquery

jquery-cycle2

1 ответ

Ещё вопросы

Bryan · Accepted Answer · 2014-03-10T18-48-00.000Z

То, как я сделаю это, - это удалить data-cycle-next="#next-question" из определения слайд-шоу и вместо этого написать свой собственный обработчик кликов на кнопке Next Question. Таким образом, вы не начнете переход до тех пор, пока не узнаете, что данные действительны.

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

  //If valid, go to next slide
      $('.cycle-slideshow').cycle('next');
});