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

问题

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 :)

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

回答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

回答3:

Try this code:

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

Most likely you will have a tag a in the slide and you must prevent the click of href.

来源：https://stackoverflow.com/questions/23855240/how-to-use-idangerous-swiper-and-jquery-click-at-the-same-time

标签

jquery

click

swiper