FancyBox with Slick slider 問題

Question

我添加了 fancybox 和 slick slider 並且它工作完美但是當你在 fancybox 中滑動圖像時我無法解決 1 個問題假設你在 slider 中有 2 個圖像然后當你滾動時單擊圖像以查看 fancybox 幻燈片中的其他圖像還有 2 張圖像，然后轉到第 3 張圖像，然后關閉 fancybox 幻燈片，它會重置光滑 slider 圖像的寬度和高度，它會占據圖像的一半，例如圖像 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>',
  });

我得到的圖像：

圖 1

圖 2

圖 3

Answer 1

通過添加設置variableWidth: true ，我能夠在您的 CodePen 中解決此問題。

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