Lazysizes with Slick Carousel load all images

[amoralesdesign]

I don't understand why using the vue-slick component loads all the images only in my product sheets: https://wanapix.co.uk/personalised-ceramic-mug To check this, use the Chrome inspector and click on network, search for "582" and you will see the images that I try to hide with lazysizes.

However in mobile mode it works well, only the first 3 images of the slider are loaded.

And curiously enough, it also works on my desktop at home: https://wanapix.co.uk

I don't understand the behavior, I've tried everything. I even disabled the Lazysizes init and waited to use it manually when loading slick carousel. But it doesn't work.

<slick-carousel class="slider-for" ref="slick_carousel" :options="slickOptions" @if(Input::has('dsn')) :design_image="'{{ FuImg::dsn(Input::get('dsn')) }}'" @endif > <template> @if(Input::has('dsn')) <img src="{{ FuImg::dsn(Input::get('dsn')) }}" alt="design" title="design"> @endif <div v-for="picture in gallery" > <picture v-if="picture.type == 'IMAGE'" v-cloak> <source :data-srcset="_getImgUrl(picture.public_id,582,'webp')" type="image/webp"> <img v-lazysizes data-sizes="800" :data-src='_getImgUrl(picture.public_id,582)' :alt="article.seo_title" :title="article.seo_title"> </picture> <template v-if="picture.type == 'VIDEO'" > <div class="youtube-video" > <iframe class="embed-responsive-item" :src="_getEmbedVideo(picture.video_file.youtube_id)" allowfullscreen></iframe> </div> </template> </div> </template> </slick-carousel>

[Gitsko]

@amoralesdesign do you found a solution ?