Bac*_*uri 5 jquery carousel slick.js fancybox-3
我编写了一个使用 Slick Slider 插件的系统，以便我可以从一个内容水平滑动到另一个内容（这些幻灯片包括图片和文本）。我还添加了 Fancybox，以便我可以在需要时全屏查看这些幻灯片中的图片。
但是这两个插件相互冲突。
一切正常，但如果我有不止一张幻灯片，Fancybox 画廊会多次向我展示同一张图片（它的行为就像同一张图片的画廊）。
这显然是一个冲突，因为当我摆脱了滑块 js 文件时，Fancybox 再次正常工作（每张图片只显示一次）。
当我保留两个画廊时，最奇怪的是画廊行为仅在我添加滑块时发生，即使它们根本不嵌入任何东西，没有 Fancybox，没有图片，什么都没有。
下面是一个jsfiddle链接。我的代码当然要复杂得多，但我使它尽可能简单以用于测试用例。除了插件之外几乎没有样式或js。
你会看到，如果你去掉“.slider2”div 中的所有东西，它就会表现得很好。如果没有，第一张图片将显示 2 张相同图片的图库（而不是一张，默认情况下它会显示图片中的 1 张），而第二张图片将显示 3 张相同图片的图库（而不是一张）并且默认情况下它会说它显示的是 3 中的图片 2）。
感谢您的帮助。
<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>
您必须使用selector“真实”幻灯片初始化脚本，然后只需为克隆的幻灯片添加自定义单击事件：
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;
});
演示 - https://codepen.io/fancyapps/pen/jvbEgo
Slick克隆幻灯片以“旋转”轮播。这意味着您有超过 1 张具有相同值的图片data-fancybox。它作为值传递rel给每个带有data-fancybox值的链接。
要禁用图库功能，您必须不传递rel值，因此只需指定data-fancybox不带值的即可：
<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">
看看它的工作原理：
<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">
$(window).on('load', () => {
$('.slider_block').slick();
});img {
width: 50%;
}如果您需要 rels（图库功能）来创建幻灯片的自定义组，则必须通过禁用其无限旋转来防止 slick 克隆幻灯片：
$('.slider_block').slick({
infinite: false;
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" />
<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="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<html>
<div class="container">
<div class="slider_block">
<div class="slider1">
<a data-fancybox 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 href="https://www.lexgotham.com/test/images/im2.jpg">
<img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
</a>
</div>
</div>
</div> $('.slider_block').slick({
infinite: false;
});
$(window).on('load', () => {
$('.slider_block').slick({infinite:false});
});PS：[SO] 不允许您添加 jsfiddle 的链接，因为 fiddle 必须位于帖子中，而不是 JSfiddle 上。如果你更新你的小提琴（因为，也许，你想测试答案？）它将不再与未来的用户相关。这意味着您寻求帮助但不想帮助别人。
简而言之，您可以链接一个小提琴，但它必须补充问题中的代码，而不是替换它。