Javascript FancyBox带有光滑滑块问题

我添加了fancybox和slick slider，它工作得很好，但是当你在fancybox中滑动图像时，有一个问题我无法解决，假设你在滑块中有两个图像，然后你点击图像查看fancybox幻灯片中的其他图像，当你滚动到另外两个图像时，转到第三个图像，然后关闭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>',
  });

$（'.slide images'）.slick({
点：错，
无限：是的，
幻灯片放映：2，
幻灯片滚动：2，
下一行：''，
前箭头：“”，
});

我得到的图像：

---

通过添加设置，

variableWidth:true

，我可以在您的代码笔中解决此问题

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

---

通过添加设置，

variableWidth:true

，我可以在您的代码笔中解决此问题

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

---

你所有的图片尺寸都一样吗？不，它们不一样，但这不是问题，因为我尝试了相同的尺寸和大小，但我遇到了相同的问题。我的代码有问题吗（JS看起来不错，但是如果没有工作示例，很难排除与Fancybox交互的故障。如果没有

infinite

选项，行为是否有任何不同？当我从slick滑块禁用infinite时，它也有同样的问题，当您滚动Fancybox滑块，然后像下面的示例一样关闭它时，问题就会出现：codepen.io/DmiE/pen/rNaOZOL您可以设置slidesToShow:2，您会看到问题，当slidesToShow=奇数时问题会解决，但当您尝试放置偶数时，它会调整滑块旋转木马的大小。所有图像的尺寸都相同吗？不，它们不相同，但这不是问题，因为我尝试了相同的尺寸和大小，但没有改变我的代码有问题吗（JS看起来不错，但是如果没有工作示例，很难排除与Fancybox交互的故障。如果没有

infinite

选项，行为是否有任何不同？当我从slick滑块禁用infinite时，它也有同样的问题，当您滚动Fancybox滑块，然后像下面的示例一样关闭它时，问题就会出现：codepen.io/DmiE/pen/rNaOZOL您可以设置slidesToShow:2，您会看到问题，当slidesToShow=奇数时问题会解决，但当您尝试放置偶数时，它会调整滑块旋转木马的大小