diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/async.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/async.vue
new file mode 100644
index 0000000000..8708a94ebf
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/async.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-swiper :auto-play="3000">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+const list = ref();
+
+onMounted(() => {
+  setTimeout(() => {
+    list.value = [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+    ];
+  }, 3000);
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/basic.vue
new file mode 100644
index 0000000000..0902de2ab6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-swiper
+    :init-page="2"
+    :auto-play="3000"
+    pagination-visible
+    pagination-color="#426543"
+    pagination-unselected-color="#808080"
+  >
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/dynamic.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/dynamic.vue
new file mode 100644
index 0000000000..70c30505d5
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/dynamic.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-swiper :auto-play="3000">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+
+onMounted(() => {
+  setTimeout(() => {
+    list.value = list.value.slice(1);
+  }, 3000);
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
index f2d53f5131..cde348a94a 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/index.vue
@@ -1,203 +1,56 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <view class="demo-box">
-      <nut-swiper
-        :init-page="state.page"
-        :pagination-visible="true"
-        pagination-color="#426543"
-        pagination-unselected-color="#808080"
-        auto-play="2000"
-      >
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>异步加载(3s)</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in state.list1" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>动态加载</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in state.list2" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>自定义大小</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page2" :loop="false" width="300">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>自定义指示器</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-        <template #page>
-          <div class="page"> {{ state.current }}/4 </div>
-        </template>
-      </nut-swiper>
-    </view>
-    <h2>自定义指示器(异步加载3s)</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :loop="true" auto-play="2000" @change="change1">
-        <nut-swiper-item v-for="item in state.list1" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-        <template #page>
-          <div class="page"> {{ state.current1 }}/4 </div>
-        </template>
-      </nut-swiper>
-    </view>
-    <h2>手动切换</h2>
-    <view class="demo-box">
-      <nut-swiper ref="swiper" :init-page="state.page" :loop="true">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-      <view class="nut-swiper-btns">
-        <span class="nut-swiper-btns__left" @click="handlePrev">
-          <Left></Left>
-        </span>
-        <span class="nut-swiper-btns__left" @click="handleNext">
-          <Right></Right>
-        </span>
-      </view>
-    </view>
-    <h2>垂直方向</h2>
-    <view class="demo-box">
-      <nut-swiper
-        :init-page="state.page4"
-        :loop="true"
-        auto-play="3000"
-        direction="vertical"
-        height="150"
-        :pagination-visible="true"
-        style="height: 150px"
-      >
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('async') }}</h2>
+    <Async />
+
+    <h2>{{ t('dynamic') }}</h2>
+    <Dynamic />
+
+    <h2>{{ t('width') }}</h2>
+    <Width />
+
+    <h2>{{ t('page') }}</h2>
+    <Page />
+
+    <h2>{{ t('methods') }}</h2>
+    <Methods />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted, ref, Ref } from 'vue';
-import { Left, Right } from '@nutui/icons-vue-taro';
-const swiper = ref(null) as Ref;
-const state = reactive({
-  page: 2,
-  page2: 0,
-  page3: 0,
-  page4: 0,
-  current: 1,
-  current1: 3,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ],
-  list2: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ],
-  list1: [] as string[]
-});
-const change = (index: number) => {
-  state.current = index + 1;
-};
-const change1 = (index: number) => {
-  state.current1 = index + 1;
-};
-const handlePrev = () => {
-  swiper.value.prev();
-};
-const handleNext = () => {
-  swiper.value.next();
-};
-onMounted(() => {
-  setTimeout(() => {
-    state.list1 = state.list.slice();
-    state.list2.splice(1, 1);
-  }, 3000);
-});
-</script>
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Async from './async.vue';
+import Dynamic from './dynamic.vue';
+import Width from './width.vue';
+import Page from './page.vue';
+import Methods from './methods.vue';
+import Vertical from './vertical.vue';
 
-<style lang="scss">
-.demo-box {
-  position: relative;
-  .nut-swiper-item {
-    height: 150px;
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &.vertical-center {
-    .nut-swiper-item {
-      height: 300px;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  .nut-swiper-pagination-vertical {
-    i {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      &.active {
-        height: 18px;
-        border-radius: 5px;
-      }
-    }
-  }
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    async: '异步加载(3s)',
+    dynamic: '动态加载',
+    width: '自定义大小',
+    page: '自定义指示器',
+    methods: '手动切换',
+    vertical: '垂直方向'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    async: 'Asynchronous loading(3s)',
+    dynamic: 'Dynamic loading',
+    width: 'Custom width',
+    page: 'Custom page',
+    methods: 'Manual switching',
+    vertical: 'Vertical direction'
   }
-  .nut-swiper-btns {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 30px;
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/methods.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/methods.vue
new file mode 100644
index 0000000000..47f5c60172
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/methods.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="swiper-demo">
+    <nut-swiper ref="swiperRef">
+      <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+        <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+      </nut-swiper-item>
+    </nut-swiper>
+    <div class="swiper-btns">
+      <div class="swiper-btn" @click="handlePrev">
+        <Left></Left>
+      </div>
+      <div class="swiper-btn" @click="handleNext">
+        <Right></Right>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue-taro';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+const swiperRef = ref();
+const handlePrev = () => {
+  swiperRef.value?.prev();
+};
+const handleNext = () => {
+  swiperRef.value?.next();
+};
+</script>
+
+<style>
+.swiper-demo {
+  position: relative;
+}
+.swiper-btns {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.swiper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/page.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/page.vue
new file mode 100644
index 0000000000..285d41b93b
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/page.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-swiper :auto-play="3000" @change="onChange">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+    <template #page>
+      <div class="swiper-pagination"> {{ val }}/4 </div>
+    </template>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+const val = ref(1);
+const onChange = (index) => {
+  val.value = index + 1;
+};
+</script>
+<style>
+.swiper-pagination {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/vertical.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/vertical.vue
new file mode 100644
index 0000000000..c54ec96bb1
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/vertical.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-swiper :auto-play="3000" loop direction="vertical" style="height: 150px">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/swiper/width.vue b/packages/nutui-taro-demo/src/exhibition/pages/swiper/width.vue
new file mode 100644
index 0000000000..9aae741efb
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/swiper/width.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-swiper :auto-play="3000" :width="300" :loop="false">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
deleted file mode 100644
index c90ae3087e..0000000000
--- a/src/packages/__VUE/swiper/demo.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <view class="demo-box">
-      <nut-swiper
-        :init-page="state.page"
-        :pagination-visible="true"
-        pagination-color="#426543"
-        pagination-unselected-color="#808080"
-        auto-play="2000"
-      >
-        <nut-swiper-item v-for="item in state.list" :key="item"> <img :src="item" alt="" /> </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('asyc') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in state.list1" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('dynamicDel') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="2000">
-        <nut-swiper-item v-for="item in state.list2" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('size') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page2" :loop="false" width="300">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('indicator') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-        <template #page>
-          <div class="page"> {{ state.current }}/4 </div>
-        </template>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('indicator1') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="state.page" :loop="true" auto-play="2000" @change="change1">
-        <nut-swiper-item v-for="item in state.list1" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-        <template #page>
-          <div class="page"> {{ state.current1 }}/4 </div>
-        </template>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('btns') }}</h2>
-    <view class="demo-box">
-      <nut-swiper ref="swiper" :init-page="state.page" :loop="true">
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-      <view class="nut-swiper-btns">
-        <span class="nut-swiper-btns__left" @click="handlePrev">
-          <Left></Left>
-        </span>
-        <span class="nut-swiper-btns__left" @click="handleNext">
-          <Right></Right>
-        </span>
-      </view>
-    </view>
-    <h2>{{ translate('vertical') }}</h2>
-    <view class="demo-box">
-      <nut-swiper
-        :init-page="state.page4"
-        :loop="true"
-        auto-play="3000"
-        direction="vertical"
-        height="150"
-        :pagination-visible="true"
-        style="height: 150px"
-      >
-        <nut-swiper-item v-for="item in state.list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, onMounted, ref, Ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Left, Right } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    asyc: '异步加载(3s)',
-    dynamicDel: '动态加载',
-    size: '自定义大小',
-    indicator: '自定义指示器',
-    indicator1: '自定义指示器(异步3s)',
-    btns: '手动切换',
-    vertical: '垂直方向',
-    horizontalCenter: '水平居中展示',
-    verticalCenter: '垂直居中展示'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    asyc: 'Asynchronous loading(3s)',
-    dynamicDel: 'Dynamic loading',
-    size: 'Custom size',
-    indicator: 'Custom indicator',
-    indicator1: 'Custom indicator(Asynchronous loading(3s))',
-    btns: 'Manual switching',
-    vertical: 'Vertical direction',
-    horizontalCenter: 'Horizontal center display',
-    verticalCenter: 'Vertical center display'
-  }
-});
-const swiper = ref(null) as Ref;
-const state = reactive({
-  page: 2,
-  page2: 0,
-  page3: 0,
-  page4: 0,
-  current: 1,
-  current1: 3,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ],
-  list2: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ],
-  list1: [] as string[]
-});
-const change = (index: number) => {
-  state.current = index + 1;
-};
-const change1 = (index: number) => {
-  state.current1 = index + 1;
-};
-const handlePrev = () => {
-  swiper.value.prev();
-};
-const handleNext = () => {
-  swiper.value.next();
-};
-onMounted(() => {
-  setTimeout(() => {
-    state.list1 = state.list.slice();
-    state.list2.splice(1, 1);
-  }, 3000);
-});
-</script>
-
-<style lang="scss" scoped>
-.demo-box {
-  position: relative;
-
-  .nut-swiper-item {
-    height: 150px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &.vertical-center {
-    .nut-swiper-item {
-      height: 300px;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  ::v-deep(.nut-swiper-pagination-vertical) {
-    i {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-
-      &.active {
-        height: 18px;
-        border-radius: 5px;
-      }
-    }
-  }
-
-  .page {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 46px;
-    height: 22px;
-    background: rgba(0, 0, 0, 0.33);
-    border-radius: 22px;
-    text-align: center;
-    color: #fff;
-    font-size: 14px;
-  }
-
-  .nut-swiper-btns {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 20px;
-      height: 30px;
-      background-color: rgba(0, 0, 0, 0.2);
-    }
-  }
-}
-</style>
diff --git a/src/packages/__VUE/swiper/demo/async.vue b/src/packages/__VUE/swiper/demo/async.vue
new file mode 100644
index 0000000000..8708a94ebf
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/async.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-swiper :auto-play="3000">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+const list = ref();
+
+onMounted(() => {
+  setTimeout(() => {
+    list.value = [
+      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+    ];
+  }, 3000);
+});
+</script>
diff --git a/src/packages/__VUE/swiper/demo/basic.vue b/src/packages/__VUE/swiper/demo/basic.vue
new file mode 100644
index 0000000000..0902de2ab6
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/basic.vue
@@ -0,0 +1,22 @@
+<template>
+  <nut-swiper
+    :init-page="2"
+    :auto-play="3000"
+    pagination-visible
+    pagination-color="#426543"
+    pagination-unselected-color="#808080"
+  >
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/src/packages/__VUE/swiper/demo/dynamic.vue b/src/packages/__VUE/swiper/demo/dynamic.vue
new file mode 100644
index 0000000000..70c30505d5
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/dynamic.vue
@@ -0,0 +1,23 @@
+<template>
+  <nut-swiper :auto-play="3000">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+
+onMounted(() => {
+  setTimeout(() => {
+    list.value = list.value.slice(1);
+  }, 3000);
+});
+</script>
diff --git a/src/packages/__VUE/swiper/demo/index.vue b/src/packages/__VUE/swiper/demo/index.vue
new file mode 100644
index 0000000000..01859d265e
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('async') }}</h2>
+    <Async />
+
+    <h2>{{ t('dynamic') }}</h2>
+    <Dynamic />
+
+    <h2>{{ t('width') }}</h2>
+    <Width />
+
+    <h2>{{ t('page') }}</h2>
+    <Page />
+
+    <h2>{{ t('methods') }}</h2>
+    <Methods />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Async from './async.vue';
+import Dynamic from './dynamic.vue';
+import Width from './width.vue';
+import Page from './page.vue';
+import Methods from './methods.vue';
+import Vertical from './vertical.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    async: '异步加载(3s)',
+    dynamic: '动态加载',
+    width: '自定义大小',
+    page: '自定义指示器',
+    methods: '手动切换',
+    vertical: '垂直方向'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    async: 'Asynchronous loading(3s)',
+    dynamic: 'Dynamic loading',
+    width: 'Custom width',
+    page: 'Custom page',
+    methods: 'Manual switching',
+    vertical: 'Vertical direction'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/swiper/demo/methods.vue b/src/packages/__VUE/swiper/demo/methods.vue
new file mode 100644
index 0000000000..3643860e5f
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/methods.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="swiper-demo">
+    <nut-swiper ref="swiperRef">
+      <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+        <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+      </nut-swiper-item>
+    </nut-swiper>
+    <div class="swiper-btns">
+      <div class="swiper-btn" @click="handlePrev">
+        <Left></Left>
+      </div>
+      <div class="swiper-btn" @click="handleNext">
+        <Right></Right>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Left, Right } from '@nutui/icons-vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+const swiperRef = ref();
+const handlePrev = () => {
+  swiperRef.value?.prev();
+};
+const handleNext = () => {
+  swiperRef.value?.next();
+};
+</script>
+
+<style>
+.swiper-demo {
+  position: relative;
+}
+.swiper-btns {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.swiper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/src/packages/__VUE/swiper/demo/page.vue b/src/packages/__VUE/swiper/demo/page.vue
new file mode 100644
index 0000000000..285d41b93b
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/page.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-swiper :auto-play="3000" @change="onChange">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+    <template #page>
+      <div class="swiper-pagination"> {{ val }}/4 </div>
+    </template>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+const val = ref(1);
+const onChange = (index) => {
+  val.value = index + 1;
+};
+</script>
+<style>
+.swiper-pagination {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 46px;
+  height: 22px;
+  background: rgba(0, 0, 0, 0.33);
+  border-radius: 22px;
+  text-align: center;
+  color: #fff;
+  font-size: 14px;
+}
+</style>
diff --git a/src/packages/__VUE/swiper/demo/vertical.vue b/src/packages/__VUE/swiper/demo/vertical.vue
new file mode 100644
index 0000000000..c54ec96bb1
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/vertical.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-swiper :auto-play="3000" loop direction="vertical" style="height: 150px">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/src/packages/__VUE/swiper/demo/width.vue b/src/packages/__VUE/swiper/demo/width.vue
new file mode 100644
index 0000000000..9aae741efb
--- /dev/null
+++ b/src/packages/__VUE/swiper/demo/width.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-swiper :auto-play="3000" :width="300" :loop="false">
+    <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
+      <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
+    </nut-swiper-item>
+  </nut-swiper>
+</template>
+<script setup>
+import { ref } from 'vue';
+const list = ref([
+  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
+  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
+  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
+  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
+]);
+</script>
diff --git a/src/packages/__VUE/swiper/doc.en-US.md b/src/packages/__VUE/swiper/doc.en-US.md
index 60effdfed2..7ec6f21a92 100644
--- a/src/packages/__VUE/swiper/doc.en-US.md
+++ b/src/packages/__VUE/swiper/doc.en-US.md
@@ -22,427 +22,33 @@ app.use(SwiperItem);
 `pagination-visible` Show paging indicator
 `pagination-color` Indicator color customization
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :pagination-visible="true"
-    pagination-color="#426543"
-    pagination-unselected-color="#808080"
-    auto-play="3000"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
+> demo: swiper basic
 
-:::
-
-### Asynchronous loading
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: []
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list = [
-      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-    ];
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
+### Asynchronous Loading
 
-:::
+> demo: swiper async
 
-### Dynamic loading
+### Dynamic Loading
 
 Support dynamic addition / deletion of pictures
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list.splice(1, 1);
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
+> demo: swiper dynamic
 
-:::
-
-### Custom size
-
-`width` Custom rotation size
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="page" :loop="false" width="300">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
+### Custom Width
 
-:::
-
-### Custom paging indicator
-
-`#page` Represents a custom indicator
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page3: 0,
-  current: 1
-});
-const change = (index) => {
-  state.current = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
+> demo: swiper width
 
-:::
-
-### 自定义指示器(异步 3s)
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current1 }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page: 0,
-  current1: 1
-});
-const change = (index) => {
-  state.current1 = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
+### Page Slot
 
-:::
-
-### Manual switching
-
-You can manually switch through `api` (`prev`, `next`)
-
-:::demo
-
-```vue
-<template>
-  <view class="demo-box">
-    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in state.list" :key="item">
-        <img :src="item" alt="" />
-      </nut-swiper-item>
-    </nut-swiper>
-    <view class="nut-swiper-btns">
-      <span class="nut-swiper-btns__left" @click="handlePrev">
-        <Left></Left>
-      </span>
-      <span class="nut-swiper-btns__left" @click="handleNext">
-        <Right></Right>
-      </span>
-    </view>
-  </view>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Left, Right } from '@nutui/icons-vue';
-const swiper = ref(null);
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-const handlePrev = () => {
-  swiper.value.prev();
-};
-const handleNext = () => {
-  swiper.value.next();
-};
-</script>
-<style>
-.demo-box {
-  position: relative;
-}
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.nut-swiper-btns {
-  width: 100%;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-}
-.nut-swiper-btns span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 30px;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
-```
+> demo: swiper page
 
-:::
-
-### Vertical direction
-
-`direction` Custom rotation direction
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :loop="true"
-    auto-play="3000"
-    direction="vertical"
-    height="150"
-    :pagination-visible="true"
-    style="height: 150px"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
-  height: 18px;
-  border-radius: 5px;
-}
-</style>
-```
+### Ref Methods
+
+> demo: swiper methods
+
+### Vertical Direction
 
-:::
+> demo: swiper vertical
 
 ## API
 
diff --git a/src/packages/__VUE/swiper/doc.md b/src/packages/__VUE/swiper/doc.md
index 763770d76f..51076f89da 100644
--- a/src/packages/__VUE/swiper/doc.md
+++ b/src/packages/__VUE/swiper/doc.md
@@ -22,427 +22,35 @@ app.use(SwiperItem);
 `pagination-visible` 是否显示分页指示器
 `pagination-color` 指示器颜色自定义
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :pagination-visible="true"
-    pagination-color="#426543"
-    pagination-unselected-color="#808080"
-    auto-play="3000"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper basic
 
 ### 异步加载
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: []
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list = [
-      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-    ];
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper async
 
 ### 动态加载
 
 支持动态增加/删除图片
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list.splice(1, 1);
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper dynamic
 
 ### 自定义大小
 
 `width` 自定义轮播大小
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="page" :loop="false" width="300">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper width
 
 ### 自定义分页指示器
 
-`#page` 表示自定义指示器
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page3: 0,
-  current: 1
-});
-const change = (index) => {
-  state.current = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
-
-:::
-
-### 自定义指示器(异步 3s)
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current1 }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page: 0,
-  current1: 1
-});
-const change = (index) => {
-  state.current1 = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
-
-:::
+> demo: swiper page
 
 ### 手动切换
 
-可通过 `API`(`prev`,`next`)进行手动切换
-
-:::demo
-
-```vue
-<template>
-  <view class="demo-box">
-    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in state.list" :key="item">
-        <img :src="item" alt="" />
-      </nut-swiper-item>
-    </nut-swiper>
-    <view class="nut-swiper-btns">
-      <span class="nut-swiper-btns__left" @click="handlePrev">
-        <Left></Left>
-      </span>
-      <span class="nut-swiper-btns__left" @click="handleNext">
-        <Right></Right>
-      </span>
-    </view>
-  </view>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Left, Right } from '@nutui/icons-vue';
-const swiper = ref(null);
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-const handlePrev = () => {
-  swiper.value.prev();
-};
-const handleNext = () => {
-  swiper.value.next();
-};
-</script>
-<style>
-.demo-box {
-  position: relative;
-}
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.nut-swiper-btns {
-  width: 100%;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-}
-.nut-swiper-btns span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 30px;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
-```
-
-:::
+> demo: swiper methods
 
 ### 垂直方向
 
-`direction` 自定义轮播方向
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :loop="true"
-    auto-play="3000"
-    direction="vertical"
-    height="150"
-    :pagination-visible="true"
-    style="height: 150px"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-.nut-swiper-item ::v-deep(.nut-swiper-pagination-vertical) i.active {
-  height: 18px;
-  border-radius: 5px;
-}
-</style>
-```
-
-:::
+> demo: swiper vertical
 
 ## API
 
diff --git a/src/packages/__VUE/swiper/doc.taro.md b/src/packages/__VUE/swiper/doc.taro.md
index 3616d44948..7043b1e4b2 100644
--- a/src/packages/__VUE/swiper/doc.taro.md
+++ b/src/packages/__VUE/swiper/doc.taro.md
@@ -22,418 +22,35 @@ app.use(SwiperItem);
 `pagination-visible` 是否显示分页指示器
 `pagination-color` 指示器颜色自定义
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :pagination-visible="true"
-    pagination-color="#426543"
-    pagination-unselected-color="#808080"
-    auto-play="3000"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper basic exhibition
 
 ### 异步加载
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: []
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list = [
-      'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-      'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-      'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-      'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-    ];
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper async exhibition
 
 ### 动态加载
 
 支持动态增加/删除图片
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
-    <nut-swiper-item v-for="item in state.list" :key="item">
-      <img :src="item" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive, onMounted } from 'vue';
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-onMounted(() => {
-  setTimeout(() => {
-    state.list.splice(1, 1);
-  }, 3000);
-});
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper dynamic exhibition
 
 ### 自定义大小
 
 `width` 自定义轮播大小
 
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="page" :loop="false" width="300">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper width exhibition
 
 ### 自定义分页指示器
 
-`#page` 表示自定义指示器
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page3" :loop="true" @change="change">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page3: 0,
-  current: 1
-});
-const change = (index) => {
-  state.current = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
-
-:::
-
-### 自定义指示器(异步 3s)
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper :init-page="state.page" :loop="true" @change="change" auto-play="2000">
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-    <template #page>
-      <div class="page"> {{ state.current1 }}/4 </div>
-    </template>
-  </nut-swiper>
-</template>
-<script setup>
-import { reactive } from 'vue';
-const state = reactive({
-  page: 0,
-  current1: 1
-});
-const change = (index) => {
-  state.current1 = index + 1;
-};
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.page {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 46px;
-  height: 22px;
-  background: rgba(0, 0, 0, 0.33);
-  border-radius: 22px;
-  text-align: center;
-  color: #fff;
-  font-size: 14px;
-}
-</style>
-```
-
-:::
+> demo: swiper page exhibition
 
 ### 手动切换
 
-可通过 `API`(`prev`,`next`)进行手动切换
-
-:::demo
-
-```vue
-<template>
-  <view class="demo-box">
-    <nut-swiper :init-page="state.page" :loop="true" ref="swiper">
-      <nut-swiper-item v-for="item in state.list" :key="item">
-        <img :src="item" alt="" />
-      </nut-swiper-item>
-    </nut-swiper>
-    <view class="nut-swiper-btns">
-      <span class="nut-swiper-btns__left" @click="handlePrev">
-        <Left></Left>
-      </span>
-      <span class="nut-swiper-btns__left" @click="handleNext">
-        <Right></Right>
-      </span>
-    </view>
-  </view>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Left, Right } from '@nutui/icons-vue';
-const swiper = ref(null);
-const state = reactive({
-  page: 2,
-  list: [
-    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
-    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
-    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
-    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
-  ]
-});
-const handlePrev = () => {
-  swiper.value.prev();
-};
-const handleNext = () => {
-  swiper.value.next();
-};
-</script>
-<style>
-.demo-box {
-  position: relative;
-}
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-.nut-swiper-btns {
-  width: 100%;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-}
-.nut-swiper-btns span {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 30px;
-  background-color: rgba(0, 0, 0, 0.2);
-}
-</style>
-```
-
-:::
+> demo: swiper methods exhibition
 
 ### 垂直方向
 
-`direction` 自定义轮播方向
-
-:::demo
-
-```vue
-<template>
-  <nut-swiper
-    :init-page="page"
-    :loop="true"
-    auto-play="3000"
-    direction="vertical"
-    height="150"
-    :pagination-visible="true"
-    style="height: 150px"
-  >
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
-    </nut-swiper-item>
-    <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
-    </nut-swiper-item>
-  </nut-swiper>
-</template>
-<script setup>
-import { ref } from 'vue';
-const page = ref(2);
-</script>
-<style>
-.nut-swiper-item {
-  line-height: 150px;
-}
-.nut-swiper-item img {
-  width: 100%;
-  height: 100%;
-}
-</style>
-```
-
-:::
+> demo: swiper vertical exhibition
 
 ## API
 
@@ -473,7 +90,7 @@ const page = ref(2);
 | --- | --- | --- |
 | prev | 切换到上一页 | - |
 | next | 切换到下一页 | - |
-| to | 切换到指定轮播 | index:number |
+| to | 切换到指定轮播 | `index:number` |
 
 ## 主题定制