我编写了一个使用 Slick Slider 插件的系统，以便我可以从一个内容水平滑动到另一个内容(这些幻灯片包括图片和文本)。 我还添加了 Fancybox，以便我可以在需要时全屏查看这些幻灯片中的图片。
但这两个插件有点相互冲突。
一切正常，但如果我有不止一张幻灯片，Fancybox 画廊会多次向我展示同一张图片(它的行为就像同一张图片的画廊)。
这显然是一个冲突，因为当我删除 slider js 文件时，Fancybox 会再次正常工作(每张图片只显示一次)。
当我保留两个画廊时，最奇怪的事情是，画廊行为仅在我添加 slider 时发生，即使它们根本没有嵌入任何内容，没有 Fancybox，没有图片，什么也没有。
下面有一个 jsfiddle 链接。 当然，我的代码要复杂得多，但我将其尽可能简单地用于测试用例。除了插件之外几乎没有样式或 js。
您会发现，如果您删除“.slider2”div 内的所有内容，它的表现就会很好。如果没有，第一张图片将显示 2 张相同图片的图库(而不是一张，默认情况下它会显示显示 2 张图片中的第 1 张)，而第二张图片将显示 3 张相同图片的图库(而不是一张)默认情况下，它会显示显示第 2 张图片(共 3 张)。
感谢您的帮助。
<head>
<link rel="stylesheet" type="text/css" href="styles/jquery.fancybox.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style>
img{width:50%;}
</style>
</head>
<body>
<div class="container">
<div class="slider_block">
<div class="slider1">
<a data-fancybox="test1" href="https://www.lexgotham.com/test/images/im1.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
</a>
</div>
<div class="slider2">
<a data-fancybox="test2" href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>$(document).ready(function() {$('.sliding').slick({});});</script>
</body>
最佳答案
您必须使用“真实”幻灯片的选择器来初始化脚本，然后只需为克隆幻灯片添加自定义点击事件即可:
var selector = '.slick-slide:not(.slick-cloned)';
// Init fancybox, skip cloned elements
$().fancybox({
selector : selector,
backFocus : false,
animationEffect : "fade"
});
// Custom click event on cloned elements,
$(document).on('click', '.slick-cloned', function(e) {
$(selector)
.eq( ( $(this).attr("data-slick-index") || 0) % $(selector).length )
.trigger("click.fb-start", { $trigger: $(this) });
return false;
});
关于JQuery - Slick Carousel 和 Fancybox 冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51589004/