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

bxSlider: How to prevent bxSlider from going to next slide?

本文关键字：bxSlider 幻灯片 一张 何防止      更新时间：2023-09-26

我正在使用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停留在当前幻灯片时，形式是无效的…

谢谢你的帮助!

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

onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                    return currentSlideNumber--;
    }
相关文章：