如何使用 iDangerous Swiper 和 jquery .click();同时

2024-01-06

我坚持以下几点:

我正在使用 iDangerous Swiper 插件,效果很好。但是,我还想在同一个 iDangerous swiper 上使用 jQuery 的单击功能。

例如:

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

问题是,滑动滑块也会触发 jquery .click。这有点糟糕,因为在我的例子中,.click 中的函数加载另一个页面。

不过,使用纯 html 链接是可行的。然而,这并不能解决我的问题,因为我希望下一页以不可见的方式加载(不在网址栏中加载)。

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

提前致谢 :)


截至目前还没有onClickSlide听众但是onClick,这很酷,因为它为您提供了更大的灵活性,例如,如果您不仅想知道点击/单击了哪张幻灯片,还想知道幻灯片中的哪个元素:

基本功能:

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 
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 iDangerous Swiper 和 jquery .click();同时 的相关文章

随机推荐