如何在 Swiper Js 中更改幻灯片时禁用单击和 touch/mouse 拖动

Question

我用 GSAP 为我的滑块添加了一些动画，这是我从 Swiper JS https://swiperjs.com/ 获得的并且一切正常，但如果用户在 Swiper 导航上点击多次（箭头、点或拖动）我的动画开始崩溃。所以问题是如何在幻灯片更改时禁用单击或滑动？我有简单的代码：

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

你能帮帮我吗？提前致谢！

Answer 1

swiper 有一个名为 noSwiping 的属性，在配置对象中将其设置为 false。

如何在 Swiper Js 中更改幻灯片时禁用单击和 touch/mouse 拖动

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

javascript

jquery

swiper

swiperjs