diff --git a/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte b/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte index fe7a0d89b..14080569c 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte +++ b/apps/www/src/lib/registry/default/ui/carousel/carousel.svelte @@ -20,6 +20,8 @@ const canScrollNext = writable(false); const optionsStore = writable(opts); const pluginStore = writable(plugins); + const scrollSnapsStore = writable([]); + const selectedIndexStore = writable(0); $: orientationStore.set(orientation); $: pluginStore.set(plugins); @@ -31,6 +33,9 @@ function scrollNext() { api?.scrollNext(); } + function scrollTo(index: number, jump?: boolean) { + api?.scrollTo(index, jump); + } function onSelect(api: CarouselAPI) { if (!api) return; @@ -65,6 +70,9 @@ options: optionsStore, plugins: pluginStore, onInit, + scrollSnaps: scrollSnapsStore, + selectedIndex: selectedIndexStore, + scrollTo, }); function onInit(event: CustomEvent) { diff --git a/apps/www/src/lib/registry/default/ui/carousel/context.ts b/apps/www/src/lib/registry/default/ui/carousel/context.ts index 1a2f462b8..c90b4cb84 100644 --- a/apps/www/src/lib/registry/default/ui/carousel/context.ts +++ b/apps/www/src/lib/registry/default/ui/carousel/context.ts @@ -38,6 +38,9 @@ type EmblaContext = { options: Writable; plugins: Writable; onInit: (e: CustomEvent) => void; + scrollTo: (index: number, jump?: boolean) => void; + scrollSnaps: Readable; + selectedIndex: Readable; }; export function setEmblaContext(config: EmblaContext): EmblaContext { diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte b/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte index fe7a0d89b..14080569c 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte +++ b/apps/www/src/lib/registry/new-york/ui/carousel/carousel.svelte @@ -20,6 +20,8 @@ const canScrollNext = writable(false); const optionsStore = writable(opts); const pluginStore = writable(plugins); + const scrollSnapsStore = writable([]); + const selectedIndexStore = writable(0); $: orientationStore.set(orientation); $: pluginStore.set(plugins); @@ -31,6 +33,9 @@ function scrollNext() { api?.scrollNext(); } + function scrollTo(index: number, jump?: boolean) { + api?.scrollTo(index, jump); + } function onSelect(api: CarouselAPI) { if (!api) return; @@ -65,6 +70,9 @@ options: optionsStore, plugins: pluginStore, onInit, + scrollSnaps: scrollSnapsStore, + selectedIndex: selectedIndexStore, + scrollTo, }); function onInit(event: CustomEvent) { diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/context.ts b/apps/www/src/lib/registry/new-york/ui/carousel/context.ts index 1a2f462b8..c90b4cb84 100644 --- a/apps/www/src/lib/registry/new-york/ui/carousel/context.ts +++ b/apps/www/src/lib/registry/new-york/ui/carousel/context.ts @@ -38,6 +38,9 @@ type EmblaContext = { options: Writable; plugins: Writable; onInit: (e: CustomEvent) => void; + scrollTo: (index: number, jump?: boolean) => void; + scrollSnaps: Readable; + selectedIndex: Readable; }; export function setEmblaContext(config: EmblaContext): EmblaContext {