Question

我坚持以下几点：

我正在使用iDangerous Swiper插件，它运行正常。但是，我还想在同一个iDangerous swiper上使用jQuery的click功能。

例如：

<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中的函数会加载另一个页面。

使用普通的html链接可以正常工作。然而，这并没有解决我的问题，因为我希望下一页无形加载（不加载在url栏中）。

有没有人知道在使用滑块时如何阻止触发上述jQuery代码？

提前致谢：）

Answer 1

我最终找到了解决方案。显然，iDangerous Swiper有自己的回调（OnClickSlide）。更多信息http://www.idangero.us/sliders/swiper/api.php

Answer 2

截至目前，没有production监听器，但onClickSlide，这很酷，因为它为您提供了更大的灵活性，例如，如果您不仅想知道哪个幻灯片被点击/点击了哪个，还有哪个幻灯片中的元素：

基本功能：

onClick

扩展功能

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

Answer 3

试试这段代码：

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

您很可能在幻灯片中有一个标记a，您必须阻止点击href。

如何使用iDangerous Swiper和jquery .click（）;同时

3 个答案: