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

Question

Im stuck on the following:

I'm using the iDangerous Swiper plugin, which works fine. However, I would also like to use jQuery's click function on that same iDangerous swiper.

For example:

<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, swiping the slider also triggers the jquery .click. That's kinda bad, because in my case the function within .click loads another page.

Using plain html links works though. This however doesn't solve my problem, because I want the next page to load invisibly (without loading in the url bar).

Does anyone know how prevent triggering the above jQuery code when using the slider?

Thanks in advance :)

Answer 1

As of now there is no onClickSlide listener but onClick, which is cool because it gives you more flexibility for example if you would like to know not only which slide was tapped/clicked but also which element within the slide:

Basic functionality:

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

Answer 2

I eventually found a solution. Apparently, iDangerous Swiper has its own callback for this (OnClickSlide). More info here http://www.idangero.us/sliders/swiper/api.php