Question

我使用 Swiper 3.4.2 滑块，拇指作为分页滑块。我需要禁用分页滑块上的拖动，但要启用单击事件，以便可以通过单击分页滑块中的拇指来更改主滑块。

    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 0,
        slidesPerView: 'auto',
        shortSwipes: false,
        slideToClickedSlide: true,
        preventClicksPropagation: false,
        preventClicks: false
    });

通过将simulateTouch设置为false，我也失去了点击触摸事件。

Answer 1

设置touchRatio: 0将禁用拖动触摸事件并启用单击触摸事件

Answer 2

从4.0版开始，您可以使用：

allowTouchMove

如果为false，则切换幻灯片的唯一方法是使用外部API 诸如slidePrev或slideNext之类的功能

Answer 3

您还可以在断点处使用touchRatio：

breakpoints: {
    600: {
        slidesPerView: 1,
        spaceBetweenSlides: 30,
        touchRatio: 1
    },
    768: {
        slidesPerView: 2,
        touchRatio: 0
    }
},

Swiper Touch Events - 启用单击但禁用拖动

3 个答案: