vanilla-lazyload: LazyLoad + Swiper not loading cloned/duplicate slides for looping slider/swiper
Howdy, I love this plugin and I’ve been using it a lot lately. I recently came across a case where I’m using Swiper (https://github.com/nolimits4web/Swiper) in an infinite loop and can’t manage to get the cloned slides to load lazily. You’ll see (1) initial images load, but (2) cloned images (used to accomplish Swiper’s loop parameter only load after you click to advance the slider.
I was hoping someone else has encountered this issue and could shed some light on the best way to ensure all the slides load correctly.
I’ve setup a fiddle that contains the essential elements of my use case and that displays the problem behavior:
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (9 by maintainers)
About lazy load of images inside a carousel slider like Swiper, Slick and others, since they don’t always actually scroll but the are moved by the sliders using CSS, you should definitely use the API provided by those scripts and avoid using lazyload there.
See how to do it for Swiper here.
Let me know if this solves.
I was able to get this working by updating my LazyLoad instance using Swiper’s
initparam (see https://jsfiddle.net/silb3r/oxb2ztu5/19/)