4

我坚持以下几点：

我正在使用 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>

和 ：

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

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

使用纯 html 链接虽然有效。然而，这并不能解决我的问题，因为我希望下一页不可见地加载（而不在 url 栏中加载）。

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

提前致谢 ：）

4

3 回答 3

4

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

于 2014-06-09T14:34:16.290 回答
4

到目前为止，没有onClickSlide侦听器 but 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 
    }
});
于 2016-12-29T13:07:24.697 回答
1

试试这个代码：

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

很可能您将在幻灯片中有一个标签 a 并且您必须防止单击 href。

于 2014-06-03T23:15:54.367 回答