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

【问题标题】：Swiper Touch Events - Enable click but disable drag滑动触摸事件 - 启用点击但禁用拖动
【发布时间】：2017-10-22 07:02:53
【问题描述】：

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

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

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

【问题讨论】：

标签： slider touch drag swiper

【解决方案1】：

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

从 v4 更新

allowTouchMove: false,

【讨论】：

出于某种原因，noSwiping 和 onlyExternal 对我不起作用，但确实如此。谢谢。

【解决方案2】：

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

allowTouchMove

如果为 false，则切换幻灯片的唯一方法是使用外部 API slidePrev 或 slideNext 等函数

【讨论】：

【解决方案3】：

你也可以在断点处使用touchRatio：

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

【讨论】：