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');
},
},