Using flickity lazyload: no effect

[Jones-S]

I am trying to use flickitys lazyload option, but it somehow does not have any effect.

here are my options:

data: () => {
    return {
      flickityOptions: {
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true,
        lazyLoad: 1,
        resize: true,
        cellAlign: 'left',
        setGallerySize: false
        // autoPlay: 5000
      },
      currentSlide: 1
    }
  },

and my flickity slider:

<VueFlickity v-if="hasSlides" ref="flickity" :options="flickityOptions">
  <div v-for="(slide, index) in slides" :key="index" class="HeroSlider__gallery-cell">
    <img
      v-if="slide.image"
      :data-flickity-lazyload-src="slide.image.sizes.large"
      :data-flickity-lazyload-srcset="`${slide.image.sizes.huge} 2000w,
      ${slide.image.sizes.large} 1440w,
      ${slide.image.sizes.medium} 1280w,
      ${slide.image.sizes.small} 720w`"
      :data-sizes="'100vw'"
      :alt="slide.image.alt || slide.image.filename"
      class="HeroSlider__image"
    >
  </div>
</VueFlickity>

Do I miss something?

I also have to mention that I currently have 4 slides, so with lazyLoad: 1, I would expect that at least my last image is lazyloaded in a carousel... Actually even more!

Anyway all my images are loaded when loading the page.

Thanks for some hints on that. Cheers

[Jones-S]

Ok, I realized one thing:

When using lazyLoad: true, it works.

When using lazyLoad: 1, I see the following weird issue:

I have 4 slides: On page load I get this:

Slide 1: loaded and displayed Slide 2: When appearing on screen: LAZYLOADED Slide 3: loaded on page load Slide 4: loaded on page load

Do you have any explanation for this? I would have expected Slide 4 to be lazyloaded and not slide 2...