search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Lazyload when scrolling down into viewport? #1043

Closed madjedo closed 4 years ago

madjedo commented 4 years ago

I understand how the lazyloading works with flickity. I can set lazyload: 1 to have adjacent slides load only when active and so on...

However, what if I want to load images only when user scroll down to the slider? Just like lazyloading any other image on the web.

For example, I have a carousel slider with 5 images, but its very low down on the page, at the moment I have set lazyload: 1. This still means however, that 3 images are directly loaded on pageload. I would like there to be some function to have images load only when user scrolls down or when the carousel slider is on viewport only.

OneTimeUser commented 4 years ago

I have done this...basically I just lazyload the carousel. Not sure if its the best option but it has worked. Just wrap the flickity initializer in a LazyLoad function.