Swiper PreventClick doesn't work with F7

Questions
1

Hi, I have a simple Swiper on my Framework7 app. All slides are links. The problem is that when I slide (drag and move), the links open.

I tried changing the preventClicks, preventClicksPropagation, touchMoveStopPropagation… options but the problem persists.

Note that when I use the same swiper outside Framework7, the problem disappears. Moreover, when my slides links are “external”, the problem also disappears. And on mobile (or Chrome inspector) the problem disappears too; It’s only on desktop version

Here is my slider with the problem: https://xioyuna.com/swipertest/

Here is the same one with external links (which works fine) : https://xioyuna.com/swipertest2/

Do you have any idea where that might come from? Thanks

1 Like
2

You need to set touchMoveStopPropagation: false on Swiper and it will work

3

No, unfortunately I’ve already tried and it doesn’t work :frowning: Like I said, I’ve tried to change almost every parameter.

Here is the Swiper code :

var discoverSwiper = new Swiper ('#my-swiper', {
    spaceBetween: 10,
    width: 320,
    touchMoveStopPropagation: false
});

And here the result : https://xioyuna.com/swipertest/

4
  1. Update F7 to latest version
  2. Remove swiper script, swiper is already included in F7
5

Same problem :disappointed:

Here is the the swiper with F7 V3 and swiper script removed https://xioyuna.com/swipertest3/

Actually I don’t understand why it works properly when I add the “external” class to the links

6

Your last demo works correct on mobile

7

Yes I know that, I specified it in my first post. It works on mobile and on the chrome inspector. But I want it to work on desktop too, because I sell mobile templates on ThemeForest so customers must be able to test it on a computer.
I just created a new F7 project from scratch with the DOM and the JS of the doc, put my swiper inside and it doesn’t work. Now I will try to recreate my swiper from scratch step by step :laughing:

8

Ok so I tried to create a default F7 project (V3) and include a default Swiper : https://xioyuna.com/swipertestscratch/

When slides contain a link to an internal page, you simply can’t move the slide without open the link (on desktop)

9

So, here’s the only solution I found to deal with that.

Add a data-src to my cards

<div class="swiper-slide">
    <div class="card" data-src="/single/">
        <img class="card-image" src="img/home1.jpg" alt="">
        <div class="card-infos">
            <h2 class="card-title">Slide 1</h2>
        </div>
    </div>
</div>

And in the JS :

$$('.swiper-slide').on('click', function(e) {
    app.router.navigate($$(this).find('.card').attr('data-src'));
});

I’m not sure that’s the best solution. Let me know if you find something better

10

This is not the use case it was designed for, so swiping = mobile only thing. Otherwise, yes, you may use such workaround like in your example

11

Just add no-fastclick class should work, as an alternative