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 () => (
+
+
+ {data.map((value) => (
+
+ {value}
+
+ ))}
+
+
+ )
+ },
+ })
+
+ 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,