CODEWITHSUNDEEP
javascriptjqueryfancyboxslick.js
Jhon Donald
Jhon Donald

Reputation: 59

FancyBox with Slick slider issue

I added fancybox and slick slider and its working perfectly but there is 1 problem that i cannot resolve when you slide images inside fancybox lets say you have 2 images in the slider then you clicked on images to view other images in fancybox slide when you scroll over 2 more images and goes to the 3rd images then you close the fancybox slide it reset width and height of slick slider images and it goes half of the image for example image number 1 goes 50% and number 2 images goes full width and height and image number 3 goes 50% width also.

here is my code :

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>',
  });

Images of what i get :

Image 1

Image 2

Image 3

Upvotes: 1

Views: 2071

Answers (2)

GiorgosK
GiorgosK

Reputation: 8299

With fancybox 3.5.7 in my case the problem seemed to be backFocus

So ended up initializing the instance like this

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

Upvotes: 1

Ed Lucas
Ed Lucas

Reputation: 7355

I was able to solve this issue in your CodePen by adding the setting, variableWidth: true.

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

Upvotes: 0

Related Questions