Question

我正在使用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停留在当前幻灯片上...

感谢您的帮助！

Answer 1

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

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

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

1 个答案: