diff --git a/packages/components/carousel/src/carousel-item.vue b/packages/components/carousel/src/carousel-item.vue
index eb3a439e20..5d2561b628 100644
--- a/packages/components/carousel/src/carousel-item.vue
+++ b/packages/components/carousel/src/carousel-item.vue
@@ -2,17 +2,7 @@
   <div
     v-show="ready"
     ref="carouselItemRef"
-    :class="[
-      ns.e('item'),
-      ns.is('active', active),
-      ns.is('in-stage', inStage),
-      ns.is('hover', hover),
-      ns.is('animating', animating),
-      {
-        [ns.em('item', 'card')]: isCardType,
-        [ns.em('item', 'card-vertical')]: isCardType && isVertical,
-      },
-    ]"
+    :class="itemKls"
     :style="itemStyle"
     @click="handleItemClick"
   >
@@ -51,6 +41,18 @@ const {
   handleItemClick,
 } = useCarouselItem(props, COMPONENT_NAME)
 
+const itemKls = computed(() => [
+  ns.e('item'),
+  ns.is('active', active.value),
+  ns.is('in-stage', inStage.value),
+  ns.is('hover', hover.value),
+  ns.is('animating', animating.value),
+  {
+    [ns.em('item', 'card')]: isCardType.value,
+    [ns.em('item', 'card-vertical')]: isCardType.value && isVertical.value,
+  },
+])
+
 const itemStyle = computed<CSSProperties>(() => {
   const translateType = `translate${unref(isVertical) ? 'Y' : 'X'}`
   const _translate = `${translateType}(${unref(translate)}px)`