如何使用iDangerous Swiper和jquery .click();同时 [英] How to use iDangerous Swiper and jquery .click(); at the same time

问题描述

我陷入了以下困境:

我正在使用iDangerous Swiper插件，该插件工作正常.但是，我也想在同一iDangerous swiper上使用jQuery的click函数.

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.

例如:

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

和:

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

问题在于，滑动滑块还会触发jquery .click.这有点不好，因为在我来说，.click中的函数会加载另一页.

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.

尽管可以使用纯HTML链接.但是，这并不能解决我的问题，因为我希望不可见地加载下一页(在网址栏中不加载).

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

有人知道如何防止在使用滑块时触发上述jQuery代码吗?

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

先谢谢您了:)

推荐答案

到目前为止，除了onClick之外没有onClickSlide侦听器，这很酷，因为它为您提供了更大的灵活性，例如，如果您不想知道的话仅点击/单击了哪张幻灯片，还有幻灯片中的哪个元素:

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:

基本功能:

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

扩展功能:

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

这篇关于如何使用iDangerous Swiper和jquery .click();同时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！