CODEWITHSUNDEEP
javascriptjqueryswiper.js
Aslan
Aslan

Reputation: 105

How to disable clicking and touch/mouse dragging while slide is changing in Swiper Js

I added some animation with GSAP for my slider, which I get from Swiper JS https://swiperjs.com/ and everything working fine, but if user will click many times on Swiper navigation (arrows, dots or dragging) my animation starts to crash. So question is how can I disable clicking or swiping while slide is changing? I have simple code:

var modernSlider = new Swiper ('.swiper-container', {
    slidesPerView: 1,
    centerSlides: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
})
modernSlider.on('slideChange', function(){
        var $self = $('.swiper-slide');
        var $tSpan = $self.find('.text h1 span');
        gsap.to($tSpan, {
            duration: 0.4,
            y: '50px'
        })
})

Can you help me, please? Thanks in advance!

Upvotes: 0

Views: 8499

Answers (1)

Stefan Morcodeanu
Stefan Morcodeanu

Reputation: 2158

swiper have a property called noSwiping set it in config object to false.

Upvotes: 3

Related Questions