愤怒的Swiper，需要取消滑动到下一张幻灯片

Idangerous Swiper, need to cancel sliding to next slide

本文关键字：幻灯片 一张 Swiper 取消 愤怒      更新时间：2023-09-26

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

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;
        }
    }
});

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

这是我的解决方案：

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();

它看起来可能有点难看，但它确实有效。欢迎使用任何增强功能。

希望这会有所帮助。感谢

您可以这样使用：

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

这里是我的代码Swiper 4.4.6

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

// 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;
});
相关文章：