CODEWITHSUNDEEP
javascriptjqueryswiper.js
Ashot Khanamiryan
Ashot Khanamiryan

Reputation: 1134

Idangerous Swiper, need to cancel sliding to next slide

I have problem. I need to validate some things in slide, and if it's not valid, don't change the slide. This is code, but it isn't working.

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;

        }
    }
});

Upvotes: 5

Views: 4638

Answers (3)

Yvann Marivint
Yvann Marivint

Reputation: 1

Here my code Swiper 4.4.6

I stop my mainSwiper nextSlide when i am in a nested Swiper and restart navigation of the mainSwiper in the last nested slide

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

Upvotes: 0

youssman
youssman

Reputation: 1524

I had to deal with a similar problem, where I needed to control if we can swipe to next or prev slide or not.

Here is my solution :

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

It may looks a little bit ugly but it works. Any enhancements are welcome.

Hope that will helps. Thanks

Upvotes: 1

khodu
khodu

Reputation: 1

You can use this way:

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

Upvotes: 0

Related Questions