fix(components): [carousel] reset the timer (#8388)

packages/components/carousel/src/carousel.vue

@@ -104,7 +104,6 @@ const items = ref<Array<CarouselItemContext>>([])
 const arrowDisplay = computed(
   () => props.arrow !== 'never' && !unref(isVertical)
 )
-const interval = computed(() => props.interval)
 
 const hasLabel = computed(() => {
   return items.value.some((item) => item.props.label.toString().length > 0)
@@ -153,8 +152,8 @@ function pauseTimer() {
 }
 
 function startTimer() {
-  if (interval.value <= 0 || !props.autoplay || timer.value) return
-  timer.value = setInterval(() => playSlides(), interval.value)
+  if (props.interval <= 0 || !props.autoplay || timer.value) return
+  timer.value = setInterval(() => playSlides(), props.interval)
 }
 
 const playSlides = () => {
@@ -191,6 +190,7 @@ function setActiveItem(index: number | string) {
   if (oldIndex === activeIndex.value) {
     resetItemPosition(oldIndex)
   }
+  resetTimer()
 }
 
 function resetItemPosition(oldIndex?: number) {
@@ -277,6 +277,11 @@ function next() {
   setActiveItem(activeIndex.value + 1)
 }
 
+function resetTimer() {
+  pauseTimer()
+  startTimer()
+}
+
 // watch
 watch(
   () => activeIndex.value,
@@ -300,6 +305,13 @@ watch(
   }
 )
 
+watch(
+  () => props.interval,
+  () => {
+    resetTimer()
+  }
+)
+
 const resizeObserver = shallowRef<ReturnType<typeof useResizeObserver>>()
 // lifecycle
 onMounted(async () => {