javascript - 滑动时光滑的轮播触发点击事件

Question

我正在将 Slick 轮播与 lightcase.js 一起使用，我面临的问题是，当我滑动 slick 时，会触发点击事件并立即显示弹出窗口。有时，单击事件不会被触发，但当您滑动整个幻灯片时，如果您只滑动一半，就会触发事件，就会发生这种情况。如果其他人也遇到过这个问题，如果您能告诉我一个可能的解决方法，我将不胜感激。

这是我的 html 结构:

<div class="slider multiple-items">
    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/1b.jpg" id="example1" class="showcase" data-rel="lightcase">
  <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/1b.jpg" alt="">
    </a>

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" id="example2" class="showcase" data-rel="lightcase">
  <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" alt="">
    </a>

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/3b.jpg" id="example3" class="showcase" data-rel="lightcase">
  <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/2b.jpg" alt="">
    </a>

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/4b.jpg" id="example4" class="showcase" data-rel="lightcase">
  <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/4b.jpg" alt="">
    </a>

    <a href="http://cornel.bopp-art.com/lightcase/project/img/examples/5b.jpg" id="example5" class="showcase" data-rel="lightcase">
  <img src="http://cornel.bopp-art.com/lightcase/project/img/examples/5b.jpg" alt="">
    </a>
</div>

以及我正在使用的js:

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

$('a[data-rel^=lightcase]').lightcase();

这是一个演示当前行为的 jsFiddle:https://jsfiddle.net/zLk1otb3/

Answer 1

如果您想在点击事件上看到幻灯片轮播，请添加 data-rel="lightcase:slideshow" 来链接项目。您看到的弹出窗口是从 Lightcase View 中弹出的链接元素。