Slick: Broken positioning when using lazyLoad, centerMode, infinite and variableWidth

Created on 28 May 2015  路  5Comments  路  Source: kenwheeler/slick

Test case:
http://jsfiddle.net/xg5s6g3c/3/

Positioning of slides is broken:

  • On load
  • When you use "previous" to navigate to a slide where the image is not yet loaded
  • On the very last slide, if you reach it by only using "next" to navigate

The positioning becomes correct when all the images are loaded.

Investigating

All 5 comments

I'm experiencing the same issue on a website I just implemented slick.js in with variableWith + lazyLoad: http://hennemanagency.nl/talent/abbey-hoes/

It doesn't only have a problem with positioning on navigation. For me the most important issue is that the lazyLoad doesn't function properly. It loads images that are not in view on page load, which kind of renders the whole lazyload functionality useless..

+1

+1

+1

Lazy Loading with Center Mode is not working correctly.
The last picture, which is the first in the row when center mode is active, isnt loaded due to lazy load (its just blank, like in the fiddle above).

I would like to use centerMode + lazyload together but having issue as on the example here:
https://codepen.io/bder/pen/VwLNBmO

When I remove data-lazy it is working as expected as below
https://codepen.io/bder/pen/KKpOayV

I am using Slick 1.9.0 version.

And also having issue with fancybox popup. Any advise is much appreciated.

Thank you in advance.

Was this page helpful?
0 / 5 - 0 ratings