I added some animation with GSAP for my slider, which I get from Swiper JS / 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!

I added some animation with GSAP for my slider, which I get from Swiper JS https://swiperjs./ 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!

• javascript
• jquery
• swiper.js

1 Answer 1

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