bxSlider：如何防止 bxSlider 进入下一张幻灯片？答案

【问题标题】：bxSlider: How to prevent bxSlider from going to next slide?bxSlider：如何防止 bxSlider 进入下一张幻灯片？
【发布时间】：2015-09-24 05:56:59
【问题描述】：

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

当表单无效时如何使 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 停留在当前幻灯片上...

感谢您的帮助！

【问题讨论】：

stackoverflow.com/questions/20518566/…
使用 auto:false 直到验证
auto: false 是默认选项，而 auto: true 不是必需的，因为当用户想要滑动到另一个页面时，这取决于用户。当表单无效时，我希望幻灯片停止（不过渡到下一张幻灯片）。

标签： javascript jquery jquery-validate bxslider

【解决方案1】：

经过一些实验和想法，这里是解决方案：

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

【讨论】：