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

Slick carousel triggering click event when swiping

本文关键字：事件      更新时间：2023-09-26

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

这是我的 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/

如果您想

在点击事件时查看幻灯片轮播，请添加data-rel="lightcase:slideshow"以链接项目。您看到的弹出窗口是来自灯箱视图中的链接元素的弹出窗口。

相关文章：