Swiper in Framework7 : methods @click on first slide in LOOP mode stop working

1

I have a gallery that use swiper in LOOP mode and inside the swiper-slide div there is a title a clickable title that allows me to add the active slide to a Wishlist…

Using methods like this:

<a @click=“wishlist” > the first link stop working in LOOP mode when duplication occurs…

I tried many things and nothing…

preventClicks: false,
preventClicksPropagation: false,

and the same issue happen the method onclick stop working for the first slide in LOOP mode.

I do not know how to avoid this but it will be good to know how to solve this issue…
thanks

2

Set click event handler to swiper wrap tag and analyze in event target, event target tagName , etc

1 Like
3

Yes,

I am trying to figure it out but no solution so far… let you know if I find a good solution… or if you find another solution to avoid this behaviour much appreciated! in the meantime I am trying to figure it out… no solution yet …

what do you mean with

Set click event handler to swiper wrap tag ?

4

publish your swiper code here

5

here it is the code sample I made for you to look up!
I have two sliders one on the top to create a list of categories of galleries and the full screen image gallery on the background the heart in the middle it is the click to add to Wishlist the slide here I use a method called Wishlist that only run a javascript to change the image and alert a message for testing…

the first image if added to Wishlist the click is working but in the second loop when duplication occurs the link does not fire anymore but for the others it still work only the first duplicated slide it is the problem here

you can download the code here
I hope you can figure it out a solution… any @click there stop working all the time… even if standalone swiper version or inside the Framework7 the same problem occurs for the first slide in LOOP mode…! Strange…

here the link to the code sample:

code here

< div class=“swiper-container-full” >
< div class=“swiper-wrapper” >

    < div data-background="images/3e450ea3fdc52b3e2e3025ae7703fdf8.jpg" class="swiper-slide swiper-lazy" style="transition: 1s ease-in-out;" >

        < div class="centered">
            < a href="#" @click="wishlist" class="wishlist">
                < img src="images/heart_off.svg" width="58" alt="">
            < /a>
        < /div>

    < /div>

    < div data-background="images/11ae2708584b4ad2f1e9cd9534dd1369.jpg" class="swiper-slide swiper-lazy" style="transition: 1s ease-in-out;">

        < div class="centered">
            < a href="#" @click="wishlist">
                < img class="wishlist" src="images/heart_off.svg" width="58" alt="">
            < /a>
        < /div>

    < /div>

    < div data-background="images/62cd9f558fdeffaeea2f4999d6a64069.jpg" class="swiper-slide swiper-lazy" style="transition: 1s ease-in-out;">

        < div class="centered">
            <a href="#" @click="wishlist">
                <img class="wishlist" src="images/heart_off.svg" width="58" alt="">
            </a>
        </div>

    </div>
</div>

pageInit: function(e, page) {

var swiper = new Swiper(’.swiper-container-full’, {
// Enable lazy loading
lazy: true,
effect: ‘fade’,
loop: true,
preventClicks: false,
preventClicksPropagation: false,
hashNavigation: {
watchState: true,
},
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
});

…

and the method

methods: {

        wishlist: function() {
            alert('added to wishlist!');
            $('.swiper-container-full .swiper-slide-active .centered img').attr('src','images/heart_on.svg');
        },
},
1 Like