[Help]: Lazy loading in Embla Svelte

[jnaklaas]

Summary

I can't seem to get my images lazy loaded. I would use svelte enhanced images in the code example, but I simplified it a bit to narrow it down. Any suggestions to what's going wrong would be greatly appreciated.

<script>
	import emblaCarouselSvelte from 'embla-carousel-svelte';
	export let images = [];
	const options = { loop: true };
</script>
<div class="embla overflow-hidden" use:emblaCarouselSvelte={{ options }}>
	<div class="embla__container flex">
		{#each images as image}
			<div class="embla__slide flex-[0_0_60%] min-w-0 pl-3">
				<div class="embla__lazy-load">
					<img
						src={image}
						class="embla__slide__img embla__lazy-load__img h-full"
					/>
				</div>
			</div>
		{/each}
	</div>
</div>

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

• Vote here: [Poll]: Vote for features ✨ #770.