Swiper Touch Events - Enable click but disable drag

user_1090395 0
Viewed 39354

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.

drag swiper.js touch slider
3 Answers

From version 4.0, you can use:

allowTouchMove

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

user_42330120

You can alsow use touchRatio at breakpoints:

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