FancyBox 带有 Slick 滑块问题

Question

我添加了 fancybox 和 slick 滑块，它工作得很好，但是当您在 fancybox 内滑动图像时，我无法解决 1 个问题，假设您在滑块中有 2 个图像，然后您单击图像以在滚动时查看 fancybox 幻灯片中的其他图像超过 2 个图像并转到第 3 个图像，然后关闭 fancybox 幻灯片，它会重置光滑滑块图像的宽度和高度，并且它会变为图像的一半，例如图像 1 变为 50%，而 2 号图像变为全宽度和高度，第 3 号图像的宽度也为 50%。

这是我的代码：

HTML

<div class="slide-images">

<div><a data-fancybox="gallery" href="Image/image1.jpg"><img src="Image/image1"></a></div>
<div><a data-fancybox="gallery" href="Image/image2.jpg"><img src="Image/image2"></a></div>
<div><a data-fancybox="gallery" href="Image/image3.jpg"><img src="Image/image3"></a></div>
<div><a data-fancybox="gallery" href="Image/image4.jpg"><img src="Image/image4"></a></div>
<div><a data-fancybox="gallery" href="Image/image5.jpg"><img src="Image/image5"></a></div>
<div><a data-fancybox="gallery" href="Image/image6.jpg"><img src="Image/image6"></a></div>
<div><a data-fancybox="gallery" href="Image/image7.jpg"><img src="Image/image7"></a></div>
<div><a data-fancybox="gallery" href="Image/image8.jpg"><img src="Image/image8"></a></div>

</div>

JavaScript

$('.slide-images').slick({
    dots: false,
    infinite: true,
    slidesToShow : 2,
    slidesToScroll:2,
    nextArrow : '<button><i class="fas fa-arrow-square-right"></i></button>',
    prevArrow : '<button><i class="fas fa-arrow-square-left"></i></button>',
  });

我得到的图片：

Answer 1

我能够通过添加设置来解决您的 CodePen 中的此问题，

variableWidth: true

。

$(".main-slider").slick({
  slidesToShow : 2,
  infinite : true,
  dots     : false,
  arrows   : false,
  variableWidth: true
});

Answer 2

在我的情况下，使用 fancybox 3.5.7 时，问题似乎是

backFocus

最终像这样初始化实例

$("[data-fancybox='images']").fancybox({
  backFocus: false,
});