From c25f173ceca0a1f552d36f524d779ecb36919f69 Mon Sep 17 00:00:00 2001 From: Jakub Date: Wed, 19 Nov 2025 10:29:29 +0100 Subject: [PATCH 1/4] fix(Carousel): consistent stopOnInteraction behavior --- src/runtime/components/Carousel.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue index 75191d0031..d1db025a55 100644 --- a/src/runtime/components/Carousel.vue +++ b/src/runtime/components/Carousel.vue @@ -225,9 +225,19 @@ watch(options, () => { function scrollPrev() { emblaApi.value?.scrollPrev() + + + if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { + emblaApi.value?.plugins().autoplay?.stop() + } } function scrollNext() { emblaApi.value?.scrollNext() + + + if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { + emblaApi.value?.plugins().autoplay?.stop() + } } function scrollTo(index: number) { emblaApi.value?.scrollTo(index) From f1192842854e9582c0ad314b41ba3f66c68beed2 Mon Sep 17 00:00:00 2001 From: Jakub Date: Wed, 19 Nov 2025 10:34:32 +0100 Subject: [PATCH 2/4] up --- src/runtime/components/Carousel.vue | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue index d1db025a55..b12e209b19 100644 --- a/src/runtime/components/Carousel.vue +++ b/src/runtime/components/Carousel.vue @@ -226,7 +226,6 @@ watch(options, () => { function scrollPrev() { emblaApi.value?.scrollPrev() - if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { emblaApi.value?.plugins().autoplay?.stop() } @@ -234,7 +233,6 @@ function scrollPrev() { function scrollNext() { emblaApi.value?.scrollNext() - if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { emblaApi.value?.plugins().autoplay?.stop() } From af6073c7b84877c9f9ecba5019722569595526cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Mich=C3=A1lek?= <71264422+J-Michalek@users.noreply.github.com> Date: Sat, 22 Nov 2025 07:59:51 +0100 Subject: [PATCH 3/4] up Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com> --- src/runtime/components/Carousel.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue index b12e209b19..1abfee4dc2 100644 --- a/src/runtime/components/Carousel.vue +++ b/src/runtime/components/Carousel.vue @@ -226,14 +226,14 @@ watch(options, () => { function scrollPrev() { emblaApi.value?.scrollPrev() - if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { + if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) { emblaApi.value?.plugins().autoplay?.stop() } } function scrollNext() { emblaApi.value?.scrollNext() - if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) { + if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) { emblaApi.value?.plugins().autoplay?.stop() } } From ddc1e8cc9480f5da1fdaab1f3ae50481df0cd2be Mon Sep 17 00:00:00 2001 From: J-michalek Date: Sat, 22 Nov 2025 08:07:47 +0100 Subject: [PATCH 4/4] up --- src/runtime/components/Carousel.vue | 38 +++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/src/runtime/components/Carousel.vue b/src/runtime/components/Carousel.vue index 1abfee4dc2..6ece0043db 100644 --- a/src/runtime/components/Carousel.vue +++ b/src/runtime/components/Carousel.vue @@ -163,6 +163,22 @@ const rootProps = useForwardProps(reactivePick(props, 'active', 'align', 'breakp const prevIcon = computed(() => props.prevIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowRight : appConfig.ui.icons.arrowLeft)) const nextIcon = computed(() => props.nextIcon || (dir.value === 'rtl' ? appConfig.ui.icons.arrowLeft : appConfig.ui.icons.arrowRight)) +const stopAutoplayOnInteraction = computed(() => { + if (typeof props.autoplay === 'boolean') { + return true + } + + return props.autoplay.stopOnInteraction ?? true +}) + +const stopAutoScrollOnInteraction = computed(() => { + if (typeof props.autoScroll === 'boolean') { + return true + } + + return props.autoScroll.stopOnInteraction ?? true +}) + const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.carousel || {}) })({ orientation: props.orientation })) @@ -223,20 +239,26 @@ watch(options, () => { emblaApi.value?.reInit(options.value, plugins.value) }, { flush: 'post' }) -function scrollPrev() { - emblaApi.value?.scrollPrev() - - if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) { +function stopOnInteraction() { + if (stopAutoplayOnInteraction.value) { emblaApi.value?.plugins().autoplay?.stop() } + + if (stopAutoScrollOnInteraction.value) { + emblaApi.value?.plugins().autoScroll?.stop() + } +} + +function scrollPrev() { + emblaApi.value?.scrollPrev() + stopOnInteraction() } + function scrollNext() { emblaApi.value?.scrollNext() - - if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) { - emblaApi.value?.plugins().autoplay?.stop() - } + stopOnInteraction() } + function scrollTo(index: number) { emblaApi.value?.scrollTo(index) }