Idangerous Swiper，需要取消滑动到下一张幻灯片

Question

我有问题。 我需要在幻灯片中验证一些内容，如果它无效，请不要更改幻灯片。 这是代码，但它不起作用。

var calcSwiper = $('.calculator .swiper-container').swiper({
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    onSlideNextStart: function (sw) {
        var input = $(sw.slides[sw.activeIndex-1]).find('input');
        if(input.length&&!input.valid()){
          //here it will stop
          return false;

        }
    }
});

Answer 1

我不得不处理类似的问题，我需要控制我们是否可以滑动到下一个或上一个幻灯片。

这是我的解决方案：

var myswiper = new Swiper('.swiper-container', {
    /** some options **/
    onClick: function(swiper, event){
        var source = event.target || event.srcElement;
        var isNext = $(source).hasClass('swiper-button-next');
        var isPrev = $(source).hasClass('swiper-button-prev');
        // check if the event's source are the navigation arrows
        if (isNext || isPrev) {
            if (/*[YOUR CONDITION]*/) {
                swiper.unlockSwipes();
                if (isNext) {swiper.slideNext();}
                else if (isPrev) {swiper.slidePrev();}
                swiper.lockSwipes();
            }
        }
    }
});
myswiper.lockSwipes(); 

它可能看起来有点难看，但它的工作原理。 欢迎任何增强功能。

希望这会有所帮助。 谢谢

Answer 2

你可以这样使用：

onSliderMove: function(sw){
    var input = $(sw.slides[sw.activeIndex-1]).find('input');
    if(input.length&&!input.valid()){
       sw.lockSwipeToNext(); 
    } 
    else {
        sw.unlockSwipeToNext();
    }
}

Answer 3

这里是我的代码Swiper 4.4.6

当我在嵌套的Swiper中并在最后一个嵌套幻灯片中重新启动mainSwiper的导航时，我停止了我的mainSwiper nextSlide

// EVENTS
mainSwiper.on('slideChange', function () {
    console.log('My slide :'+ mainSwiper.activeIndex);
    switch(mainSwiper.activeIndex){
        case 2: 
            mainSwiper.allowSlideNext = true;
            break;          
        case 3: 
            console.log('Nested swiper slide');
            mainSwiper.allowSlideNext = false;
            break;
    }
});     

mainCubeSwiper.on('reachBeginning', function () {
    console.log('Start nested slide');
    mainSwiper.allowSlideNext = true;
}); 

mainCubeSwiper.on('reachEnd', function () {
    console.log('Last nested slide');
    mainSwiper.allowSlideNext = false;
});