javascript - bxSlider:如何防止bxSlider转到下一张幻灯片？

Question

我正在使用 bxSlider 插件来创建 JS Web 应用程序。在一张幻灯片上有一个需要验证的表单，然后才能转到下一张幻灯片。对于验证，我使用 jQuery Validate 插件，当表单有效时它返回 true/false。

当表单无效时，如何使 bxSlider 不转到下一张幻灯片？我更喜欢使用默认的 bxSlider 下一个/上一个控件。

初始化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 停留在当前幻灯片上...

感谢您的帮助!

Answer 1

经过一些实验和想法，解决方案如下:

onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                    return currentSlideNumber--;
    }