Question

我已经编码了一个使用Slick Slider插件的系统，这样我就可以从一个内容水平滑动到另一个内容（这些幻灯片同时包含图片和文字）。我还添加了Fancybox，以便在需要时可以全屏查看幻灯片中的图片。

但是这两个插件相互冲突。

一切正常，但如果我有一张以上的幻灯片，Fancybox画廊将向我展示同一张图片好几倍（其行为就像是同一张图片的画廊）。

这显然是一个冲突，因为当我摆脱了js滑块文件时，Fancybox仍可以正常工作（每张图片仅显示一次）。

当我同时保留两个画廊时，最奇怪的是画廊的行为只有在我添加滑块时才会发生，即使它们根本没有嵌入任何东西，没有Fancybox，没有图片，什么也没有。

在jsfiddle链接下面。我的代码当然要复杂得多，但是我尽可能地简化了测试用例。除了插件外，几乎没有样式或js。

您将看到，如果您摆脱了“ .slider2” div内的所有内容，它将表现得很好。如果不是，则第一张图片将显示2张相同图片的画廊（而不是一张，默认情况下将显示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>

演示：http://jsfiddle.net/evsq80az/10

Answer 1

您必须使用selector初始化“真实”幻灯片的脚本，然后为克隆的幻灯片添加自定义click事件：

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

Answer 2

滑动克隆幻灯片以“旋转”转盘。这意味着您有1张以上的图片，其值为data-fancybox。它通过rel值作为data-fancybox值传递给每个链接。

要禁用图库功能，您不必传递rel值，因此只需指定不带值的data-fancybox：

<a data-fancybox href="https://www.lexgotham.com/test/images/im2.jpg">

看到它正常工作：

$(window).on('load', () => {
  $('.slider_block').slick();
});

img {
  width: 50%;
}

<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>

如果您需要使用rels（相册功能）来创建幻灯片的自定义组，则必须通过禁用其无限旋转来防止滑条克隆幻灯片：

 $('.slider_block').slick({
   infinite: false;
 });

$(window).on('load', () => {
  $('.slider_block').slick({infinite:false});
});

img {
  width: 50%;
}

<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>
      <a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im1.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-1" href="https://www.lexgotham.com/test/images/im2.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im1.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im1.jpg" />
      </a>
    </div>
    <div>
      <a data-fancybox="gallery-2" href="https://www.lexgotham.com/test/images/im2.jpg">
        <img alt="" src="https://www.lexgotham.com/test/images/im2.jpg" />
      </a>
    </div>
  </div>
</div>

P.S：[SO]不允许您向jsfiddle添加链接，因为小提琴必须在帖子中，而不是在JSfiddle上。如果您更新小提琴（因为也许要测试答案？），它将不再与将来的用户相关。这意味着您需要帮助，但又不想帮助别人。

简而言之，您可以链接一个小提琴，但是它必须补充问题中的代码，而不是替换它。

Answer 3

如果使用的是fancybox v3，则为我提供最佳解决方案。使用update（）重新计算大小。

   $('[data-fancybox="images"]').fancybox({

        afterLoad : function(instance, current) {
            instance.update();

        }
    });

Answer 4

万一有人在寻找一种简便的方法，以免在您的fancybox画廊（v3）中显示克隆的幻灯片。只需使用以下代码即可：

$('[data-fancybox]:not(.slick-cloned)').fancybox();

Answer 5

这段代码帮你解决slick滑块和fancybox的冲突问题。此外，当光滑的滑块无限循环打开时，解决fancybox弹出窗口中的重复缩略图问题。 让我们试试下面的代码。

 jQuery(document).ready(function ($) {
        $('.carousel-section').each(function () {
            var selector = '.carousel-section .slick-slide:not(.slick-cloned) [data-fancybox="fancybox_view"]';
    
            $().fancybox({
                selector: selector,
                backFocus: false,
                margin: [44, 0, 22, 0],
                baseClass: 'carousel-fancybox-wrapper',
                loop: true,
                thumbs: {
                    autoStart: thumb,
                    axis: 'x'
                },
                toolbar: true,
                infobar: true,
            })
 
            $('.carousel-section').on('click', '.slick-cloned', function (e) {
                $(selector)
                    .eq(($(e.currentTarget).attr("data-slick-index") || 0) % $(selector).length)
                    .trigger("click", {
                        $trigger: $(this)
                    });
                return false;
            });
        })
        
    });

jQuery-Slick Carousel和Fancybox冲突

5 个答案: