fix(Carousel): consistent stopOnInteraction behavior (#5489)

Co-authored-by: Jakub <[email protected]>
Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>

Author: 3 people

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,12 +239,26 @@ watch(options, () => {
   emblaApi.value?.reInit(options.value, plugins.value)
 }, { flush: 'post' })
 
+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()
+  stopOnInteraction()
 }
+
 function scrollTo(index: number) {
   emblaApi.value?.scrollTo(index)
 }