Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swiper Touch Events - Enable click but disable drag

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.

like image 890
Mladen Janjetovic Avatar asked May 22 '17 14:05

Mladen Janjetovic


3 Answers

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

Update from v4

allowTouchMove: false,
like image 147
Mladen Janjetovic Avatar answered Oct 05 '22 00:10

Mladen Janjetovic


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

like image 23
Akos Hamori Avatar answered Oct 04 '22 23:10

Akos Hamori


You can alsow use touchRatio at breakpoints:

breakpoints: {
    600: {
        slidesPerView: 1,
        spaceBetweenSlides: 30,
        touchRatio: 1
    },
    768: {
        slidesPerView: 2,
        touchRatio: 0
    }
},
like image 31
Marian Kosaniak Avatar answered Oct 05 '22 01:10

Marian Kosaniak