滑动触摸事件 - 启用点击但禁用拖动

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 将禁用拖动触摸事件并启用点击触摸事件

从 v4 更新

allowTouchMove: false,

Answer 2

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

allowTouchMove

If false, then the only way to switch the slide is use of external API functions like slidePrev or slideNext

Answer 3

您也可以在断点处使用 touchRatio:

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

滑动触摸事件 - 启用点击但禁用拖动

Swiper Touch Events - Enable click but disable drag

slider

touch

drag

swiper