How to use iDangerous Swiper and jquery.click (); in the same time

Question

I am stuck on the following:

I am using the iDangerous Swiper plugin, which works great. However, I would also like to use the jQuery click function on the same iDangerous swiper.

For instance:

<div id="swiper-container">
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
</div>

and:

$('.swiper-slide').click(function() {
//more functionality here
}

The problem is that scrolling the slider also starts jquery.click. This is bad because in my case, the function inside .click loads another page.

Using simple html links works. This, however, does not solve my problem, because I want the next page to load invisibly (without loading in the url line).

Does anyone know how to prevent the above jQuery code from running when using the slider?

Thanks in advance:)

Answer 1

. -, iDangerous Swiper (OnClickSlide). http://www.idangero.us/sliders/swiper/api.php

Answer 2

:

$('.swiper-slide').click(function(event) {
    event.preventDefault();
    //more functionality here
}

, a , href.

Answer 3

At the moment there is no listener onClickSlide, but onClick, which is cool, because it gives you more flexibility, for example, if you want to know not only which slide was pressed, but also which element in the slide

Main functions:

var swiper = new Swiper(container, {
    direction: 'horizontal',
    loop: true,
    onClick: (swiper, event) => {
        let div = swiper.clickedSlide; //slide that was clicked
    }
});

Extended functionality:

var swiper = new Swiper(container, {
    direction: 'horizontal',
    loop: true,
    onClick: (swiper, event) => {
        let element = event.target;
        //specific element that was clicked i.e.: p or img tag 
    }
});