From 66a0ca27587f2404eb7dab86bceb1804ca2b96bc Mon Sep 17 00:00:00 2001
From: Jevin <69580637+jevin98@users.noreply.github.com>
Date: Wed, 13 Aug 2025 17:49:35 +0800
Subject: [PATCH] fix(components): [carousel] special case `activeIndex` is
 inaccurate (#21736)

* fix: done

* chore: update

* chore: update

* chore: foramt

---------

Co-authored-by: chenwenjie <chenwenjie@zujibao.net>
Co-authored-by: warmthsea <2586244885@qq.com>
---
 .../carousel/__tests__/carousel.test.tsx      | 31 +++++++++++++++++++
 packages/components/carousel/src/carousel.vue |  3 +-
 .../components/carousel/src/use-carousel.ts   |  9 ++++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/components/carousel/__tests__/carousel.test.tsx b/packages/components/carousel/__tests__/carousel.test.tsx
index 9b3be9b652..516fb80b79 100644
--- a/packages/components/carousel/__tests__/carousel.test.tsx
+++ b/packages/components/carousel/__tests__/carousel.test.tsx
@@ -380,4 +380,35 @@ describe('Carousel', () => {
     vm.$refs.carousel.next()
     expect(vm.$refs.carousel.activeIndex).toBe(3)
   })
+
+  it('two item, activeIndex is not a supplementary item', async () => {
+    const data = [100, 200]
+
+    wrapper = mount({
+      setup() {
+        return () => (
+          <div>
+            <Carousel 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)
+    vm.$refs.carousel.next()
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+    vm.$refs.carousel.next()
+    expect(vm.$refs.carousel.activeIndex).toBe(0)
+    vm.$refs.carousel.prev()
+    expect(vm.$refs.carousel.activeIndex).toBe(1)
+  })
 })
diff --git a/packages/components/carousel/src/carousel.vue b/packages/components/carousel/src/carousel.vue
index cf969d7685..781e5c9e79 100644
--- a/packages/components/carousel/src/carousel.vue
+++ b/packages/components/carousel/src/carousel.vue
@@ -108,6 +108,7 @@ const emit = defineEmits(carouselEmits)
 const {
   root,
   activeIndex,
+  exposeActiveIndex,
   arrowDisplay,
   hasLabel,
   hover,
@@ -175,7 +176,7 @@ function handleTransitionEnd(e: TransitionEvent) {
 
 defineExpose({
   /** @description active slide index */
-  activeIndex,
+  activeIndex: exposeActiveIndex,
   /** @description manually switch slide, index of the slide to be switched to, starting from 0; or the `name` of corresponding `el-carousel-item` */
   setActiveItem,
   /** @description switch to the previous slide */
diff --git a/packages/components/carousel/src/use-carousel.ts b/packages/components/carousel/src/use-carousel.ts
index 5a1865ddf3..ca2423e1d4 100644
--- a/packages/components/carousel/src/use-carousel.ts
+++ b/packages/components/carousel/src/use-carousel.ts
@@ -255,6 +255,14 @@ export const useCarousel = (
       }
     }
   )
+
+  const exposeActiveIndex = computed({
+    get: () => {
+      return isItemsTwoLength.value ? activeIndex.value % 2 : activeIndex.value
+    },
+    set: (value) => (activeIndex.value = value),
+  })
+
   watch(
     () => props.autoplay,
     (autoplay) => {
@@ -316,6 +324,7 @@ export const useCarousel = (
   return {
     root,
     activeIndex,
+    exposeActiveIndex,
     arrowDisplay,
     hasLabel,
     hover,