How do I update the options of the carousel dynamically

[AnsBdran]

Summary

I'm using svelte.
I'm trying to update the options dynamically but I'm getting an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

how to do it correctly.

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

<script lang="ts">
	import { default as useEmblaCarousel } from 'embla-carousel-svelte';
	import { watch } from 'runed';
	import { type EmblaOptionsType } from 'embla-carousel';

	let slides = Array.from({ length: 603 }, (_, i) => i + 1);
	
	
	let options = $state<EmblaOptionsType>({
		direction: 'rtl',

		watchDrag: true
		// watchDrag: manager.config.current.mode !== 'memorize'
		// active: manager.config.current.mode !== 'memorize'
	});

	watch(
		() => manager.config.current.mode,
		() => {
			options = {
				...options,
				watchDrag: manager.config.current.mode !== 'memorize'
			};
		},
	);
</script>

<div class="embla h-full">
	<div
		class="embla__viewport h-full"
		use:useEmblaCarousel={{
			options
		}}
	>
		<div class="embla__container h-full">
			{#each slides as index}
				<div class="embla__slide h-full">
					{#if manager.carousel.slidesInView.current.includes(index)}
						<!-- some component -->
					{:else}
						<div class="placeholder">Loading...</div>
					{/if}
				</div>
			{/each}
		</div>
	</div>
</div>

CodeSandbox example

No response

[AnsBdran]

What I want to achieve is:

Toggling dragging/swiping for changing slides on and off.

[AnsBdran]

Solved

	watchDrag: () => {
			if (condition) {
				return true;
			}
			return false;
		}

[davidjerleke]

@AnsBdran thanks for sharing your solution 👍🏻.

If you want, you can make it simpler:

watchDrag: () => {
  return condition;
}