V6 - how to prevent click propagation while swiping to the next slide in Swiper 6.6.2?

I am using latest release in everything and I have a big problem with swiper and in my case my slides of stores are clickable with a click/tap but I want to prevent click/tap when swiping to the next slide…

The Issue: the click/tap is activated when swiping to the next slide!

is there a way to avoid this behaviour?

I am using the options below without any luck:

preventClicks: true,
preventClicksPropagation: true,

my code:

                      var swiper = $f7.swiper.create(
                        '.swiper-container.stores', {
                          lazy: {
                            threshold: 50,
                            loadPrevNext: true,
                            loadPrevNextAmount: 2,
                          },
                          preventClicks: true,
                          preventClicksPropagation: true,
                          centeredSlides: false,
                          watchSlidesVisibility: true,
                          observer: true,
                          loop: false,
                          initialSlide: 0,
                          preloadImages: false,
                          lazy: true,
                          slidesPerView: 'auto',
                          spaceBetween: 5,
                          pagination: {
                            el: '.swiper-pagination',
                            dynamicBullets: false,
                          },
                          scrollbar: {
                            el: '.swiper-scrollbar',
                            hide: true,
                          },
                          on: {
                            init: function () {
                            },
                            tap: function (swiper, e) {

                              if ($(e.target).closest(".swiper-slide").attr('data-id')) {
      
                                var store_id = $(e.target).closest(".swiper-slide").attr('data-id');
        
                                setTimeout(function () {
        
                                  $f7.views.main.router.navigate('/store/' + store_id + '/');
        
                                }, 10);
        
                              }
        
        
                            },
        
                          },
                        });

Appreciate any tip to solve this issue with latest swiper!

In swiper version 3 it seems to be working perfectly click when click and when swiping click is not propagated!

How can I make this work with version 6 or it is a bug?
thanks

I know this is a bit old, but curious if you ever solved. I’m having the same issue.

1 Like

not yet but if I found it let you know!

I think I found a solution after testing all things!

in tab

e.preventDefault(); 
swiper.allowClick = false; 

in touchStart

e.preventDefault();

in click

e.preventDefault();

here the complete solution!

        var swiper = $f7.swiper.create('.swiper.stores', {
          lazy: {
            threshold: 50,
            loadPrevNext: true,
            loadPrevNextAmount: 2,
          },
          preventClicks: true,
          preventClicksPropagation: true,
          centeredSlides: false,
          watchSlidesVisibility: true,
          observer: true,
          loop: false,
          initialSlide: 0,
          preloadImages: false,
          touchMoveStopPropagation: false,
          lazy: true,
          slidesPerView: 'auto',
          spaceBetween: 5,
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
          },
          on: {
            init: function () {
              console.log('swiper init');
            },
            click: function (swiper, e) {
              console.log('swiper click');
              e.preventDefault();
            },
            tap: function (swiper, e) {
              console.log('swiper tap');
              e.preventDefault();
              swiper.allowClick = false;
            },
            touchStart: function (swiper, e){
              console.log('swiper touchStart');
              e.preventDefault();
            },  
            touchMove: function (swiper, e){
              console.log('swiper touchMove');
            },
            touchEnd: function (swiper, e){
              console.log('swiper touchEnd');
            },
            observerUpdate: function (swiper, e) {
              console.log('swiper observerUpdate');
            },
          }
        });