2015-09-24 5 views
1

Я использую плагин bxSlider для создания веб-приложения JS. На одном слайде есть форма , которая должна быть проверена, прежде чем я смогу добраться до следующего слайда. Для проверки я использую плагин jQuery Validate, который возвращает true/false, когда форма действительна.bxSlider: Как предотвратить переход bxSlider на следующий слайд?

Как заставить bxSlider не перейти к следующему слайду, если форма недействительна? Я бы предпочел использовать стандартные элементы управления bxSlider next/prev.

Функция, которая инициализирует bxSlider:

bxSliderInit: function() { 
    var $slider = $(dom.slider); 

    $(dom.body).on('click', dom.pageLink, function(e) { 
     e.preventDefault(); 

     _this = $(this); 
     slideFinished = true; 
     //newSlide = _this.data('slide-index'); 

     app.slidePaging(); 
    }); 

    slider = $slider.bxSlider({ 
     mode: 'horizontal', 
     easing: 'ease-out', 
     infiniteLoop: false, 
     touchEnabled: false, 
     preventDefaultSwipeY: true, 
     preventDefaultSwipeX: true, 
     responsive: false, 
     slideWidth: 1024, 
     pager: false, 
     prevText: '<i class="icon icon-arrow-left"></i>', 
     nextText: '<i class="icon icon-arrow-right"></i>', 

     onSlideBefore: function($slideElement, oldIndex, newIndex) { 
      app.slideValidation($slideElement, oldIndex, newIndex); 
     } 
    }); 
}, 

BxSlider обратного вызова onSlideBefore проверить форму

slideValidation: function($slideElement, oldIndex, newIndex) { 

    var $thisSlidevalidationForm = $(dom.slider).children().eq(oldIndex).find(dom.formValidationClass), 
     validationFromExist = $thisSlidevalidationForm.length > 0 ? true : false; 

    if (oldIndex < newIndex) { 
     if (validationFromExist) { 

      if (!$thisSlidevalidationForm.valid()) { 
       //slider.dontDoTransition 
      } 
     } 
    } 
}, 

Все, кажется, работает хорошо, я просто не могу заставить bxSlider остаться на текущем слайде если форма недействительна ...

Спасибо за помощь!

+0

http://stackoverflow.com/questions/20518566/bx-slider-how-to-continue-auto-sliding-after-clicking -in-default-bx-pager –

+0

use auto: false до подтверждения –

+0

auto: false - это опция по умолчанию и auto: true не требуется, поскольку это зависит от пользователя, когда он хочет перейти на другую страницу. Я хочу, чтобы слайд-шоу остановилось (без перехода на следующий слайд), когда форма недействительна. –

ответ

0

После некоторых экспериментов и идей, вот решение:

onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
        return currentSlideNumber--; 
    } 
Смежные вопросы