From 0023b39f01e24dffdc52cf1d144e46dbbdc9990c Mon Sep 17 00:00:00 2001
From: E66 <E66_Crisp@163.com>
Date: Sun, 1 Feb 2026 15:11:06 +0800
Subject: [PATCH] fix(components): [carousel] avoid stopping autoplay after
 children change (#23494)

* fix(components): [carousel] Carousel stops autoplay

* test(components): [carousel] add test cases

* Update packages/components/carousel/__tests__/carousel.test.tsx

Co-authored-by: rzzf <cszhjh@gmail.com>

---------

Co-authored-by: keeplearning66 <1256734885@qq.com>
Co-authored-by: rzzf <cszhjh@gmail.com>
---
 .../carousel/__tests__/carousel.test.tsx      | 37 +++++++++++++++++++
 .../components/carousel/src/use-carousel.ts   |  2 +-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/components/carousel/__tests__/carousel.test.tsx b/packages/components/carousel/__tests__/carousel.test.tsx
index 516fb80b79..efc9989386 100644
--- a/packages/components/carousel/__tests__/carousel.test.tsx
+++ b/packages/components/carousel/__tests__/carousel.test.tsx
@@ -411,4 +411,41 @@ describe('Carousel', () => {
     vm.$refs.carousel.prev()
     expect(vm.$refs.carousel.activeIndex).toBe(1)
   })
+
+  it('should continue auto play after adding new items dynamically', async () => {
+    const data = reactive([1, 2, 3])
+
+    wrapper = mount({
+      setup() {
+        return () => (
+          <div>
+            <Carousel interval={30} ref={'carousel'}>
+              {data.map((value) => (
+                <CarouselItem label={value} key={value}>
+                  {value}
+                </CarouselItem>
+              ))}
+            </Carousel>
+          </div>
+        )
+      },
+    })
+
+    await nextTick()
+    const vm = wrapper.vm
+
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+
+    await wait(40)
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+
+    data.push(4)
+    await nextTick()
+
+    expect(wrapper.findAll('.el-carousel__item').length).toBe(4)
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+
+    await wait(80)
+    expect(vm.$refs.carousel.activeIndex).toBe(2)
+  })
 })
diff --git a/packages/components/carousel/src/use-carousel.ts b/packages/components/carousel/src/use-carousel.ts
index 58db453212..0f3207c622 100644
--- a/packages/components/carousel/src/use-carousel.ts
+++ b/packages/components/carousel/src/use-carousel.ts
@@ -214,7 +214,7 @@ export const useCarousel = (
 
   function resetTimer() {
     pauseTimer()
-    if (!props.pauseOnHover) startTimer()
+    if (!props.pauseOnHover || !hover.value) startTimer()
   }
 
   function setContainerHeight(height: number) {