diff --git a/packages/docs/src/App.vue b/packages/docs/src/App.vue
index c88b89b4de2d39368670bf25e13681a840f56ee6..a932b36818bf4cc93ee454f32c12e518870bb77f 100644
--- a/packages/docs/src/App.vue
+++ b/packages/docs/src/App.vue
@@ -9,6 +9,7 @@ import TheAnchor from './components/TheAnchor';
 import { getHeads } from './utils/getHeads';
 import { useScreen } from './utils/useScreen';
 import { useThemeStore } from '@/stores/theme';
+import DocConfigProvide from './components/DocConfigProvide.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -89,18 +90,20 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div
-    class="app-wrapper"
-    :class="{ 'hide-sidebar': hideAside }"
-    :style="{ '--app-aside-width': appAsideWidth, '--app-aside-static-width': asideStaticWidth, '--app-anchor-width': appAnchorWidth }"
-  >
-    <TheHeader class="app-header" />
-    <TheAside v-if="sidebarStore.hasData" class="app-aside" @click-sidebar="handleAsideClick" />
-    <TheAnchor v-if="heads.length" :heads="heads" :target-offset="60" class="app-anchor" />
-    <div ref="appBodyDom" class="app-body">
-      <router-view />
+  <DocConfigProvide :skin="themeStore.skinValue">
+    <div
+      class="app-wrapper"
+      :class="{ 'hide-sidebar': hideAside }"
+      :style="{ '--app-aside-width': appAsideWidth, '--app-aside-static-width': asideStaticWidth, '--app-anchor-width': appAnchorWidth }"
+    >
+      <TheHeader class="app-header" />
+      <TheAside v-if="sidebarStore.hasData" class="app-aside" @click-sidebar="handleAsideClick" />
+      <TheAnchor v-if="heads.length" :heads="heads" :target-offset="60" class="app-anchor" />
+      <div ref="appBodyDom" class="app-body">
+        <router-view />
+      </div>
     </div>
-  </div>
+  </DocConfigProvide>
 </template>
 
 <style lang="scss">
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
index 87b795c3e5b43c1a57e9b8631d6bb7074f078891..b6fd6ec2d2ab32448f674b9b3736c7256cf56f35 100644
--- a/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
+++ b/packages/opendesign/src/carousel/__docs__/__case__/CarouselUsage.vue
@@ -5,7 +5,10 @@
 
 幻灯片有两种播放效果滚动和切换
 
-- 将 `effect` 设置为 `gallery` (默认值) 为滚动效果
+- 将 `effect` 设置为 `gallery` (默认值) 为滚动效果。当为滚动效果时，可以将 `OCarouselItem` 的宽度设置为略小于 `OCarousel` 的宽度，
+  这样可以将当前激活的幻灯片两侧的幻灯片显示出来，此时 `clickToSwitch` 参数才会有效果。
+
+  ![示意图](./half.zh-CN.png)
 - 将 `effect` 设置为 `toggle` 为切换效果
 
 自动播放
@@ -40,6 +43,10 @@
 The slideshow has two playback effects: scrolling and switching.
 
 - Set `effect` to `gallery`(default value) for a scrolling effect.
+  When using the scrolling effect, you can set the width of `OCarouselItem` to be slightly smaller than the width of `OCarousel`.
+  This allows the slides adjacent to the currently active slide to be partially visible, enabling the `clickToSwitch` parameter to take effect.
+
+  ![figure](./half.en-US.png)
 - Set `effect` to `toggle` for a switching effect.
 
 Auto Play:
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/CustomIndicator.vue b/packages/opendesign/src/carousel/__docs__/__case__/CustomIndicator.vue
index 812917b53b22110a64e16cf57f1c19540e465a2e..d5981e5d87ae7c5789330ea97a92819cb7c0aea3 100644
--- a/packages/opendesign/src/carousel/__docs__/__case__/CustomIndicator.vue
+++ b/packages/opendesign/src/carousel/__docs__/__case__/CustomIndicator.vue
@@ -9,12 +9,13 @@
 
 ### Custom indicator
 
-You can customize the indicator by using the `indicator` slot. The `indicator` slot is a scope slot that receives `index` and `active` parameters, which represent the index of the current indicator and whether the current indicator is active.
+You can customize the indicator by using the `indicator` slot. The `indicator` slot is a scope slot that receives `index` and `active` parameters,
+which represent the index of the current indicator and whether the current indicator is active.
 
 </docs>
 <script setup lang="ts">
 import { OCarousel, OCarouselItem } from '@opensig/opendesign';
-const indicators = [
+const pages = [
   { content: 'welcome join opendesign', title: 'welcome' },
   { content: 'opendesign is a free and open source vue component library', title: 'open source' },
   { content: 'thank you for using opendesign', title: 'thank you' },
@@ -23,9 +24,9 @@ const indicators = [
 <template>
   <div class="carousel-wrapper">
     <OCarousel indicator-click class="carousel-custom-style" arrow="always">
-      <OCarouselItem v-for="(item, idx) in indicators" :key="idx" class="carousel-item">{{ item.content }}</OCarouselItem>
+      <OCarouselItem v-for="(item, idx) in pages" :key="idx" class="carousel-item">{{ item.content }}</OCarouselItem>
       <template #indicator="{ active, index }">
-        <div class="indicator" :class="{ active }">{{ indicators[index].title }}</div>
+        <div class="indicator" :class="{ active }">{{ pages[index].title }}</div>
       </template>
     </OCarousel>
   </div>
@@ -33,7 +34,7 @@ const indicators = [
 <style lang="scss" scoped>
 // custom indicator style
 .indicator {
-  color: #fff;
+  color: var(--o-color-info1);
   cursor: pointer;
   width: 6em;
   text-align: center;
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/CustomStyle.vue b/packages/opendesign/src/carousel/__docs__/__case__/CustomStyle.vue
deleted file mode 100644
index 694f46f690ea41c4bb84b73282264284e2123ca2..0000000000000000000000000000000000000000
--- a/packages/opendesign/src/carousel/__docs__/__case__/CustomStyle.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<docs lang="md">
-<!-- zh-CN -->
-
-### 自定义样式
-
-通过 `arrowWrapClass` 和 `indicatorWrapClass` 可以分别给箭头和指示器的容器添加类名，从而实现自定义样式。
-
-还可以通过 css 变量来自定义箭头或指示器的样式：
-
-- `--carousel-arrow-size`: 箭头大小
-- `--carousel-arrow-color`: 箭头颜色
-- `--carousel-arrow-color-hover`: 箭头 hover 颜色
-- `--carousel-arrow-color-active`: 箭头按下颜色
-- `--carousel-indicator-width`: 指示器宽度
-- `--carousel-indicator-height`: 指示器高度
-- `--carousel-indicator-gap`: 指示器间距
-- `--carousel-indicator-offset`: 指示器距离容器底部的距离
-- `--carousel-indicator-bg-color`: 指示器背景色
-- `--carousel-indicator-bg-color-hover`: 指示器 hover 背景色
-- `--carousel-indicator-bg-color-active`: 指示器激活背景色
-- `--carousel-indicator-bg-color-selected`: 指示器按下背景色
-
-**注**：由于 `OCarouselItem` 组件的父容器的 `position` 值为 `absolute`，会导致 `OCarousel` 的高度塌陷，因此应该明确给 `OCarousel` 设置高度，如 `height: 300px;`
-
-<!-- en-US -->
-
-### Custom Styles
-
-By using `arrowWrapClass` and `indicatorWrapClass`, you can add custom class names to the arrow and indicator containers respectively to achieve custom styling.
-
-You can also customize the arrow or indicator styles through CSS variables:
-
-- `--carousel-arrow-size`: Arrow size
-- `--carousel-arrow-color`: Arrow color
-- `--carousel-arrow-color-hover`: Arrow hover color
-- `--carousel-arrow-color-active`: Arrow active color
-- `--carousel-indicator-width`: Indicator width
-- `--carousel-indicator-height`: Indicator height
-- `--carousel-indicator-gap`: Indicator spacing
-- `--carousel-indicator-offset`: Indicator distance from container bottom
-- `--carousel-indicator-bg-color`: Indicator background color
-- `--carousel-indicator-bg-color-hover`: Indicator hover background color
-- `--carousel-indicator-bg-color-active`: Indicator active background color
-- `--carousel-indicator-bg-color-selected`: Indicator selected background color
-
-**Note**: Since the `position` value of the parent container of the `OCarouselItem` component is set to `absolute`, it will cause the height collapse of `OCarousel`. Therefore, you should explicitly set a height for `OCarousel`, such as `height: 300px;`.
-</docs>
-
-<script setup lang="ts">
-import { OCarousel, OCarouselItem } from '@opensig/opendesign';
-</script>
-<template>
-  <div class="carousel-wrapper">
-    <OCarousel class="carousel-custom-style" arrow="always">
-      <OCarouselItem class="carousel-item">1</OCarouselItem>
-      <OCarouselItem class="carousel-item">2</OCarouselItem>
-      <OCarouselItem class="carousel-item">3</OCarouselItem>
-    </OCarousel>
-  </div>
-</template>
-<style lang="scss" scoped>
-.carousel-wrapper {
-  overflow: hidden;
-}
-.carousel-custom-style {
-  // Explicitly set the height of the carousel
-  height: 300px;
-  // The space between the carousel and the indicator
-  margin-bottom: 24px;
-  // Move the indicators outside the carousel
-  --carousel-indicator-offset: -20px;
-  // Set the color of the indicators
-  --carousel-arrow-color: #fff;
-  // Set the hover color of the indicators
-  --carousel-arrow-color-hover: var(--o-color-info3-inverse);
-}
-.carousel-item {
-  height: 100%;
-  width: 100%;
-  color: #fff;
-  text-align: center;
-  line-height: 300px;
-  font-size: var(--o-font_size-h1);
-  &:nth-child(1) {
-    background-color: #4e73df;
-  }
-  &:nth-child(2) {
-    background-color: #36b9cc;
-  }
-  &:nth-child(3) {
-    background-color: #f6c23e;
-  }
-}
-</style>
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel1.vue b/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel1.vue
new file mode 100644
index 0000000000000000000000000000000000000000..067f7f0fea200971a5888b60e3ccc02b44e03dda
--- /dev/null
+++ b/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel1.vue
@@ -0,0 +1,59 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 鲲鹏、昇腾、欧拉主题规范
+
+规范定义了三种轮播：
+
+- 首页轮播：该轮播指示器具有标题和正文，轮播组件未实现该功能，但可以通过 `indicator` 插槽手动实现，因此该皮肤由社区自己实现
+- 内页轮播
+- 楼层轮播：目前楼层轮播与内页轮播的区别仅仅是视口小于等于 840px 时指示器宽度不同，添加 `carousel-floor` 类名应用该样式
+
+#### 内页轮播
+
+<!-- en-US -->
+
+### Kunpeng, Ascend, OpenEuler Theme Specifications
+
+The specifications define three types of carousels:
+
+- Homepage Carousel: This carousel indicator includes a title and body text.
+  The carousel component does not natively implement this feature, but it can be manually implemented using the `indicator` slot.
+  Therefore, this skin should be implemented by the community.
+- Inner Page Carousel
+- Floor Carousel: Currently, the only difference between the floor carousel and the inner page carousel is the indicator width
+  when the viewport is less than or equal to 840px. Apply the `carousel-floor` class name to use this style.
+
+#### Inner Page Carousel
+</docs>
+<script setup lang="ts">
+import { OCarousel, OCarouselItem } from '@opensig/opendesign';
+</script>
+<template>
+  <OCarousel class="carousel-skin">
+    <OCarouselItem v-for="i in 3" :key="i" :class="['carousel-item-content', `item-${i}`]">{{ i }}</OCarouselItem>
+  </OCarousel>
+</template>
+<style scoped lang="scss">
+.carousel-skin {
+  height: 200px;
+  overflow: hidden;
+  .carousel-item-content {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    line-height: 200px;
+    font-size: var(--o-font_size-h1);
+    &.item-1 {
+      background-color: #4e73df;
+    }
+    &.item-2 {
+      background-color: #f6c23e;
+    }
+    &.item-3 {
+      background-color: #e74a3b;
+    }
+  }
+}
+</style>
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel2.vue b/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a9269b559438fd059435b1096b7158a62e6f4da0
--- /dev/null
+++ b/packages/opendesign/src/carousel/__docs__/__case__/SkinCarousel2.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+#### 楼层轮播
+
+<!-- en-US -->
+
+#### Floor Carousel
+</docs>
+<script setup lang="ts">
+import { OCarousel, OCarouselItem } from '@opensig/opendesign';
+</script>
+<template>
+  <OCarousel class="carousel-skin carousel-floor">
+    <OCarouselItem v-for="i in 3" :key="i" :class="['carousel-item-content', `item-${i}`]">{{ i }}</OCarouselItem>
+  </OCarousel>
+</template>
+<style scoped lang="scss">
+.carousel-skin {
+  height: 200px;
+  overflow: hidden;
+  .carousel-item-content {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    text-align: center;
+    line-height: 200px;
+    font-size: var(--o-font_size-h1);
+    &.item-1 {
+      background-color: #4e73df;
+    }
+    &.item-2 {
+      background-color: #f6c23e;
+    }
+    &.item-3 {
+      background-color: #e74a3b;
+    }
+  }
+}
+</style>
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/ThemeSwitch.vue b/packages/opendesign/src/carousel/__docs__/__case__/ThemeSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..28c29d662b30fa7545a30ca4f62480b686eed091
--- /dev/null
+++ b/packages/opendesign/src/carousel/__docs__/__case__/ThemeSwitch.vue
@@ -0,0 +1,59 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 明暗色切换
+
+在深色背景图中往往需要使用浅色文字及控件，在浅色背景图中往往需要使用深色文字及控件。这样的明暗色切换可以通过给组件设置 `data-o-theme="ThemeValue"` 来实现。
+
+<!-- en-US -->
+
+### Light/Dark Theme Switching
+
+In dark background images, light-colored text and controls are often required,
+while in light background images, dark-colored text and controls are typically used.
+This light/dark theme switching can be achieved by setting the `data-o-theme="ThemeValue"` attribute for the component.
+</docs>
+<script setup lang="ts">
+import { inject, computed, ref } from 'vue';
+import { OCarousel, OCarouselItem } from '@opensig/opendesign';
+
+const pages = [
+  {
+    content: 'dark image',
+    backgroundColor: '#730015',
+    themeColor: 'dark',
+  },
+  {
+    content: 'light image',
+    backgroundColor: '#E8FFEE',
+    themeColor: 'light',
+  },
+];
+// ctx.skin: Ascend, Kunpeng, OpenEuler or OpenDesign skin
+const ctx = inject('docs-config', { skin: '' });
+const activeIndex = ref(0);
+const getTheme = (themeColor: string) => (ctx.skin ? `${ctx.skin}.${themeColor}` : themeColor);
+const controlTheme = computed(() => getTheme(pages[activeIndex.value].themeColor));
+</script>
+<template>
+  <OCarousel v-model:active-index="activeIndex" arrow="always" :data-o-theme="controlTheme" class="switch-color">
+    <OCarouselItem v-for="(item, index) in pages" :key="index" :style="{ backgroundColor: item.backgroundColor }" class="switch-color-item">
+      {{ item.content }}
+    </OCarouselItem>
+  </OCarousel>
+</template>
+<style scoped lang="scss">
+.switch-color {
+  height: 200px;
+  overflow: hidden;
+}
+.switch-color-item {
+  width: 100%;
+  height: 100%;
+  color: var(--o-color-info1);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/half.en-US.png b/packages/opendesign/src/carousel/__docs__/__case__/half.en-US.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca03bb116dcc3e9b12643d3d9fc63fa168ebdf8b
Binary files /dev/null and b/packages/opendesign/src/carousel/__docs__/__case__/half.en-US.png differ
diff --git a/packages/opendesign/src/carousel/__docs__/__case__/half.zh-CN.png b/packages/opendesign/src/carousel/__docs__/__case__/half.zh-CN.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdefcd216a819e5783b11a1e0a8e3ea00997a865
Binary files /dev/null and b/packages/opendesign/src/carousel/__docs__/__case__/half.zh-CN.png differ
diff --git a/packages/opendesign/src/carousel/__docs__/index.en-US.md b/packages/opendesign/src/carousel/__docs__/index.en-US.md
index 854ed8db9d3205130ac16e5b3eab0c57a47dcc2c..84ee6b24b7b90a725228dc3f70a4c54aa7c3325a 100644
--- a/packages/opendesign/src/carousel/__docs__/index.en-US.md
+++ b/packages/opendesign/src/carousel/__docs__/index.en-US.md
@@ -3,14 +3,34 @@ sidebar: OCarousel
 ---
 
 # Carousel
+
 ## Demo
 
 <!-- @usage CarouselUsage -->
-<!-- @case CustomStyle -->
 <!-- @case CustomArrow -->
 <!-- @case CustomIndicator -->
+<!-- @case ThemeSwitch -->
+<!-- @case:a|k|e SkinCarousel1 -->
+<!-- @case:a|k|e SkinCarousel2 -->
 
 ## API
 
+### CSS Variables
+
+| CSS Variable | Description |
+| --- | --- |
+| \-\-carousel-arrow-size | Pagination arrow size |
+| \-\-carousel-arrow-color | Pagination arrow color |
+| \-\-carousel-arrow-color-hover | Pagination arrow hover color |
+| \-\-carousel-arrow-color-active | Pagination arrow active color |
+| \-\-carousel-indicator-width | Indicator width |
+| \-\-carousel-indicator-height | Indicator height |
+| \-\-carousel-indicator-gap | Indicator spacing |
+| \-\-carousel-indicator-offset | Distance from indicator hot zone to container bottom |
+| \-\-carousel-indicator-bg-color | Indicator background color |
+| \-\-carousel-indicator-bg-color-hover | Indicator hover background color |
+| \-\-carousel-indicator-bg-color-active | Indicator active background color |
+| \-\-carousel-indicator-bg-color-selected | Indicator pressed background color |
+
 <!-- @api OCarousel -->
 <!-- @api OCarouselItem -->
diff --git a/packages/opendesign/src/carousel/__docs__/index.zh-CN.md b/packages/opendesign/src/carousel/__docs__/index.zh-CN.md
index db2755b7fb27bf6798a5b090ab56febb3b054fe1..b651612657aa4ce4a409c4d30134d15a3300cd70 100644
--- a/packages/opendesign/src/carousel/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/carousel/__docs__/index.zh-CN.md
@@ -3,14 +3,34 @@ sidebar: OCarousel 幻灯片
 ---
 
 # 幻灯片
+
 ## 示例
 
 <!-- @usage CarouselUsage -->
-<!-- @case CustomStyle -->
 <!-- @case CustomArrow -->
 <!-- @case CustomIndicator -->
+<!-- @case ThemeSwitch -->
+<!-- @case:a|k|e SkinCarousel1 -->
+<!-- @case:a|k|e SkinCarousel2 -->
 
 ## API
 
+### CSS 变量
+
+| CSS 变量 | 描述 |
+| --- | --- |
+| \-\-carousel-arrow-size | 翻页箭头大小 |
+| \-\-carousel-arrow-color | 翻页箭头颜色 |
+| \-\-carousel-arrow-color-hover | 翻页箭头hover颜色 |
+| \-\-carousel-arrow-color-active | 翻页箭头按下颜色 |
+| \-\-carousel-indicator-width | 指示器宽度 |
+| \-\-carousel-indicator-height | 指示器高度 |
+| \-\-carousel-indicator-gap | 指示器间距 |
+| \-\-carousel-indicator-offset | 指示器热区距离容器底部的距离 |
+| \-\-carousel-indicator-bg-color | 指示器背景色 |
+| \-\-carousel-indicator-bg-color-hover | 指示器 hover 背景色 |
+| \-\-carousel-indicator-bg-color-active | 指示器激活背景色 |
+| \-\-carousel-indicator-bg-color-selected | 指示器按下背景色 |
+
 <!-- @api OCarousel -->
 <!-- @api OCarouselItem -->
diff --git a/packages/opendesign/src/carousel/types.ts b/packages/opendesign/src/carousel/types.ts
index c27990323132becbadb24495705685c2d1b9c42f..c5fab7713c1f2291b6245ca82f9ac82fbb94e250 100644
--- a/packages/opendesign/src/carousel/types.ts
+++ b/packages/opendesign/src/carousel/types.ts
@@ -25,8 +25,9 @@ export const carouselProps = {
     type: Boolean,
   },
   /**
-   * @zh-CN 播放间隔
-   * @en-US Play interval
+   * @zh-CN 播放间隔(ms)
+   * @en-US Play interval(ms)
+   * @default 5000
    * @default 5000
    */
   interval: {