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

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

3 个答案: