Swiper Touch Events - Enable click but disable drag

slider touch drag swiper
Mladen Janjetovic picture Mladen Janjetovic · May 22, 2017 · Viewed 19.7k times · Source

I am using Swiper 3.4.2 slider with thumbs as a pagination slider. And I need to disable drag on the pagination slider but to enable click events so the main slider can be changed by clicking on thumbs in the pagination slider.

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

By setting simulateTouch to false, I am loosing the click touch event also.

Answer

Mladen Janjetovic picture Mladen Janjetovic · May 22, 2017

Setting the touchRatio: 0 will disable the drag touch event and leave the click touch event enabled

Update from v4

allowTouchMove: false,

Related questions

Implementing a slider (SeekBar) in Android

I want to implement a slider, which is basically two lines, one vertical and one horizontal, crossing where the screen is touched. I have managed to make one but I have to issues: The slider is not very smooth, there …

Read More
Touch move getting stuck Ignored attempt to cancel a touchmove

I'm messing around with touch events on a touch slider and I keep getting the following error: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. I'm not …

Read More
jQuery UI sliders on touch devices

I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be. The …

Read More