[Help]: This code is very slow on medium devices, why?

[frederikhors]

Summary

I have this in Svelte 5 component in a SvelteKit 2 app:

<script lang="ts">
	import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
	import emblaCarouselSvelte from 'embla-carousel-svelte';
	import Autoplay from 'embla-carousel-autoplay';
	import Fade from 'embla-carousel-fade';
	import { onDestroy } from 'svelte';

	const emblaSvelteOptions: { options: EmblaOptionsType; plugins: EmblaPluginType[] } = {
		options: { loop: true, containScroll: false },
		plugins: [Fade(), Autoplay({ stopOnInteraction: false })]
	};

	let emblaApi: EmblaCarouselType;

	function onemblaInit(event: CustomEvent) {
		emblaApi = event.detail;
	}

	onDestroy(() => {
		emblaApi.destroy();
	});
</script>

	<div
		class="embla"
		use:emblaCarouselSvelte={emblaSvelteOptions}
		{onemblaInit}
	>
		<div class="embla__container">
			<div class="embla__slide">
				<img src="/images/1.webp" />
			</div>

			<div class="embla__slide">
					<video autoplay loop>
						<source src="/videos/1.mp4" type="video/mp4" />
					</video>
			</div>

			<div class="embla__slide">
				<img src="/images/2.webp" />
			</div>

			<div class="embla__slide">
					<video autoplay loop>
						<source src="/videos/2.mp4" type="video/mp4" />
					</video>
			</div>

			<div class="embla__slide">
				<img src="/images/3.webp" />
			</div>

			<div class="embla__slide">
					<video autoplay loop>
						<source src="/videos/3.mp4" type="video/mp4" />
					</video>
			</div>
		</div>
	</div>

The problem is that everything seems very slow on older devices (and even newer ones) because the videos are all downloaded at the start and, more importantly, they're all rendered at once even if the slide with the photo is visible at that moment. I'd like the video to not be playing if it's not visible.

Is there a way?

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-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[sarussss]

Hi @frederikhors
This is completely normal, if you want to load after the video then you need to handle it yourself, you have 2 or 20 videos that you do not handle yourself then it will always load immediately when the page loads, Embla will not handle it for you, that helps Embla to be lightweight.
Autoplay also you will need to handle when to play video when to pause video.

[frederikhors]

An example of how to do it wouldn't hurt. By the way, it's very common for sliders to have videos.

[davidjerleke]

Hi @frederikhors,

As @sarussss mentioned, the slowness comes from downloading many videos at once. Instead, you should lazy-load the videos as they enter the viewport (the user scrolls them into view), and render a simple placeholder that takes up the same space, as demonstrated in the Lazy Load example in the docs.

Unfortunately, the examples are currently only available in vanilla JavaScript or React. While I’d love to provide Svelte examples as well, this is a known limitation due to time constraints, and it will likely only change if the project receives funding. That said, you should be able to adapt the vanilla JavaScript example to Svelte without too much trouble.