Repository: Tencent/tdesign-mobile-vue
Pull request #262 (2022-08-01 08:45:26)

feat(Swiper): support pagination-position
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 新特性提交



### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- feat(Swiper): 新增 `paginationPosition` 属性




Patch:
diff --git a/src/_common b/src/_common
index a742f04f..ea02472f 160000
--- a/src/_common
+++ b/src/_common
@@ -1,1 +1,1 @@
-Subproject commit a742f04f02d653a0a5eaa88931557019c8a17c77
+Subproject commit ea02472f924235d5ed7c90bf760487a7957c1a1d
diff --git a/src/swiper/demos/base.vue b/src/swiper/demos/base.vue
index 8e7d2041..eed4c047 100644
--- a/src/swiper/demos/base.vue
+++ b/src/swiper/demos/base.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <div style="padding: 0 16px">
-      <t-swiper>
-        <t-swiper-item class="swiper-item--demo">
-          <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-        </t-swiper-item>
-        <t-swiper-item class="swiper-item--demo">
-          <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-        </t-swiper-item>
-        <t-swiper-item class="swiper-item--demo">
-          <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-        </t-swiper-item>
-      </t-swiper>
-    </div>
-  </div>
+  <t-swiper
+    :interval="3000"
+    :autoplay="true"
+    :navigation="{ type: 'dots', showSlideBtn: false }"
+    @change="handleChange"
+  >
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
+    </t-swiper-item>
+  </t-swiper>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const handleChange = (index: number) => {
+  console.log('基础示例,页数变化到》》》', index);
+};
+</script>
 <style lang="less">
-.t-swiper {
-  margin-bottom: 24px;
-}
 .swiper-item--demo {
   img {
     height: 100%;
diff --git a/src/swiper/demos/controlled.vue b/src/swiper/demos/controlled.vue
new file mode 100644
index 00000000..66c09092
--- /dev/null
+++ b/src/swiper/demos/controlled.vue
@@ -0,0 +1,29 @@
+<template>
+  <t-swiper v-model:current="state.currentPage" :interval="3000" :autoplay="true" :navigation="{ showSlideBtn: true }">
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
+    </t-swiper-item>
+  </t-swiper>
+</template>
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+const state: {
+  currentPage: number;
+} = reactive({
+  currentPage: 1,
+});
+</script>
+<style lang="less">
+.swiper-item--demo {
+  img {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/swiper/demos/direction.vue b/src/swiper/demos/direction.vue
index c6768dbf..0d684bd5 100644
--- a/src/swiper/demos/direction.vue
+++ b/src/swiper/demos/direction.vue
@@ -1,11 +1,15 @@
 <template>
-  <div>
-    <t-swiper :autoplay="false" :height="180" direction="vertical" :navigation="{ type: 'fraction' }">
-      <t-swiper-item class="swiper-item--demo"> itme1 </t-swiper-item>
-      <t-swiper-item style="background: blue" class="swiper-item--demo"> item2 </t-swiper-item>
-      <t-swiper-item style="background: green" class="swiper-item--demo"> item3 </t-swiper-item>
-    </t-swiper>
-  </div>
+  <t-swiper :autoplay="false" :height="180" direction="vertical" :navigation="{ type: 'fraction' }">
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
+    </t-swiper-item>
+  </t-swiper>
 </template>
 <script lang="ts" setup></script>
 <style lang="less">
@@ -18,5 +22,9 @@
   background-color: #f33;
   font-size: 20px;
   color: #fff;
+
+  img {
+    height: 100%;
+  }
 }
 </style>
diff --git a/src/swiper/demos/mobile.vue b/src/swiper/demos/mobile.vue
index 4f44f641..e5996a44 100644
--- a/src/swiper/demos/mobile.vue
+++ b/src/swiper/demos/mobile.vue
@@ -4,144 +4,27 @@
     <p class="summary">用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置</p>
     <tdesign-demo-block title="01 类型" summary="轮播图的多种样式">
       <div style="padding: 0 16px">
-        <t-swiper
-          :interval="3000"
-          :autoplay="true"
-          :navigation="{ type: 'dots', showSlideBtn: false }"
-          @change="handleChange"
-        >
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-        </t-swiper>
+        <baseDemo />
+        <directionDemo />
+        <navigationTypeDemo />
+        <controlledDemo />
 
-        <t-swiper :autoplay="false" :height="180" direction="vertical" :navigation="{ type: 'fraction' }">
-          <t-swiper-item class="swiper-item--demo1">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo1">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo1">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-        </t-swiper>
-
-        <t-swiper :autoplay="false" :navigation="{ type: 'dots-bar' }">
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-        </t-swiper>
-
-        <t-swiper
-          v-model:current="state.currentPage"
-          :interval="3000"
-          :autoplay="true"
-          :navigation="{ showSlideBtn: true }"
-        >
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-        </t-swiper>
         <!-- no loop -->
-        <t-swiper :interval="3000" :loop="false" :navigation="{ showSlideBtn: true }">
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-        </t-swiper>
-        <!-- <h2>异步内容</h2>
-        <demo-async /> -->
-        <!-- <t-swiper :interval="3000" :autoplay="true">
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
-          </t-swiper-item>
-          <t-swiper-item class="swiper-item--demo">
-            <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
-          </t-swiper-item>
-          <template #navigation>
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
-          </template>
-        </t-swiper> -->
+        <noLoopDemo />
       </div>
     </tdesign-demo-block>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
-// import async from './async.vue';
-
-export default defineComponent({
-  components: {
-    // 'demo-async': async,
-  },
-  setup() {
-    const handleChange = (index: number) => {
-      console.log('基础示例,页数变化到》》》', index);
-    };
-    const state: {
-      currentPage: number;
-    } = reactive({
-      currentPage: 1,
-    });
-    return {
-      current: 1,
-      state,
-      handleChange,
-    };
-  },
-});
+<script lang="ts" setup>
+import baseDemo from './base.vue';
+import noLoopDemo from './no-loop.vue';
+import directionDemo from './direction.vue';
+import navigationTypeDemo from './navigation-type.vue';
+import controlledDemo from './controlled.vue';
 </script>
+
 <style lang="less">
 .t-swiper {
   margin-bottom: 24px;
 }
-.swiper-item--demo {
-  img {
-    height: 100%;
-  }
-}
-.swiper-item--demo1 {
-  width: 100%;
-  height: 180px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #f33;
-  font-size: 20px;
-  color: #fff;
-
-  img {
-    height: 100%;
-  }
-}
 </style>
diff --git a/src/swiper/demos/navigation-type.vue b/src/swiper/demos/navigation-type.vue
new file mode 100644
index 00000000..ea730f8d
--- /dev/null
+++ b/src/swiper/demos/navigation-type.vue
@@ -0,0 +1,21 @@
+<template>
+  <t-swiper :autoplay="false" :navigation="{ type: 'dots-bar' }">
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
+    </t-swiper-item>
+  </t-swiper>
+</template>
+<script lang="ts" setup></script>
+<style lang="less">
+.swiper-item--demo {
+  img {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/swiper/demos/no-loop.vue b/src/swiper/demos/no-loop.vue
new file mode 100644
index 00000000..930ffd54
--- /dev/null
+++ b/src/swiper/demos/no-loop.vue
@@ -0,0 +1,20 @@
+<template>
+  <t-swiper :interval="3000" :loop="false" :navigation="{ showSlideBtn: true }">
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" />
+    </t-swiper-item>
+    <t-swiper-item class="swiper-item--demo">
+      <img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" />
+    </t-swiper-item>
+  </t-swiper>
+</template>
+<style lang="less">
+.swiper-item--demo {
+  img {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/swiper/demos/pagination-type.vue b/src/swiper/demos/pagination-type.vue
deleted file mode 100644
index b96a0e8b..00000000
--- a/src/swiper/demos/pagination-type.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div>
-    <t-swiper :autoplay="false" :navigation="{ type: 'fraction', showSlideBtn: true }">
-      <t-swiper-item class="swiper-item--demo"> itme1 </t-swiper-item>
-      <t-swiper-item style="background: blue" class="swiper-item--demo"> item2 </t-swiper-item>
-      <t-swiper-item style="background: green" class="swiper-item--demo"> item3 </t-swiper-item>
-    </t-swiper>
-  </div>
-</template>
-<script lang="ts" setup></script>
diff --git a/src/swiper/props.ts b/src/swiper/props.ts
index 74e6db65..592d317d 100644
--- a/src/swiper/props.ts
+++ b/src/swiper/props.ts
@@ -14,7 +14,7 @@ export default {
     default: 'slide' as TdSwiperProps['animation'],
     validator(val: TdSwiperProps['animation']): boolean {
       if (!val) return true;
-      return ['slide'].includes(`${val}`);
+      return ['slide'].includes(val);
     },
   },
   /** 是否自动播放 */
@@ -41,7 +41,8 @@ export default {
     type: String as PropType<TdSwiperProps['direction']>,
     default: 'horizontal' as TdSwiperProps['direction'],
     validator(val: TdSwiperProps['direction']): boolean {
-      return ['horizontal', 'vertical'].includes(`${val}`);
+      if (!val) return true;
+      return ['horizontal', 'vertical'].includes(val);
     },
   },
   /** 滑动动画时长 */
@@ -67,6 +68,15 @@ export default {
   navigation: {
     type: [Object, Function] as PropType<TdSwiperProps['navigation']>,
   },
+  /** 页码信息展示位置 */
+  paginationPosition: {
+    type: String as PropType<TdSwiperProps['paginationPosition']>,
+    default: 'bottom' as TdSwiperProps['paginationPosition'],
+    validator(val: TdSwiperProps['paginationPosition']): boolean {
+      if (!val) return true;
+      return ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right'].includes(val);
+    },
+  },
   /** 轮播切换时触发 */
   onChange: Function as PropType<TdSwiperProps['onChange']>,
 };
diff --git a/src/swiper/swiper.en-US.md b/src/swiper/swiper.en-US.md
new file mode 100644
index 00000000..d4ec9aaa
--- /dev/null
+++ b/src/swiper/swiper.en-US.md
@@ -0,0 +1,34 @@
+:: BASE_DOC ::
+
+## API
+
+### Swiper Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+animation | String | slide | options：slide | N
+autoplay | Boolean | true | \- | N
+current | Number | 0 | `v-model` and `v-model:current` is supported | N
+defaultCurrent | Number | 0 | uncontrolled property | N
+direction | String | horizontal | options：horizontal/vertical | N
+duration | Number | 300 | \- | N
+height | Number | - | \- | N
+interval | Number | 5000 | \- | N
+loop | Boolean | true | \- | N
+navigation | Object / Slot / Function | - | Typescript：`SwiperNavigation | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+paginationPosition | String | bottom-right | options：top-left/top/top-right/bottom-left/bottom/bottom-right | N
+onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'touch' | ''`<br/> | N
+
+### Swiper Events
+
+name | params | description
+-- | -- | --
+change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'touch' | ''`<br/>
+
+### SwiperNavigation
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+minShowNum | Number | - | \- | N
+showSlideBtn | Boolean | - | \- | N
+type | String | - | Typescript：`SwiperNavigationType` `type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N
diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md
index d88e49f3..e027fbfa 100644
--- a/src/swiper/swiper.md
+++ b/src/swiper/swiper.md
@@ -15,6 +15,7 @@ height | Number | - | 当使用垂直方向滚动时的高度 | N
 interval | Number | 5000 | 轮播间隔时间 | N
 loop | Boolean | true | 是否循环播放 | N
 navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型：`SwiperNavigation | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+paginationPosition | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N
 onChange | Function |  | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'touch' | ''`<br/> | N
 
 ### Swiper Events
diff --git a/src/swiper/swiper.vue b/src/swiper/swiper.vue
index 569cf207..b79ed4ff 100644
--- a/src/swiper/swiper.vue
+++ b/src/swiper/swiper.vue
@@ -20,7 +20,12 @@
           <chevron-right-icon size="20px" />
         </span>
       </span>
-      <span v-if="'type' in navigation" :class="`${name}__pagination ${name}__pagination-${navigation.type || ''}`">
+      <span
+        v-if="'type' in navigation"
+        :class="`${name}__pagination ${name}__pagination-${
+          navigation.type || ''
+        } ${name}__pagination-${paginationPosition}`"
+      >
         <template v-if="['dots', 'dots-bar'].includes(navigation.type || '')">
           <span
             v-for="(item, index) in state.children.length"
@@ -104,7 +109,6 @@ export default defineComponent({
       return activeIndex + 1;
     });
     const childCount = computed(() => state.children.length);
-
     const getContainer = (): HTMLDivElement => self?.proxy?.$el.querySelector('.t-swiper__container');
     // const getContainer = (): HTMLDivElement => swiperContainer.value as any;
     const initSwiper = () => {
diff --git a/src/swiper/type.ts b/src/swiper/type.ts
index addb1d7c..8d6aae99 100644
--- a/src/swiper/type.ts
+++ b/src/swiper/type.ts
@@ -27,6 +27,11 @@ export interface TdSwiperProps {
    * @default 0
    */
   defaultCurrent?: number;
+  /**
+   * 当前轮播在哪一项（下标）
+   * @default 0
+   */
+  modelValue?: number;
   /**
    * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
    * @default horizontal
@@ -55,6 +60,11 @@ export interface TdSwiperProps {
    * 导航器全部配置
    */
   navigation?: SwiperNavigation | TNode;
+  /**
+   * 页码信息展示位置
+   * @default bottom-right
+   */
+  paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
   /**
    * 轮播切换时触发
    */


Test patch:
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index 7ea62b04..d1c3f6a1 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -58398,7 +58398,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/async.vue 1`] = `
         </span>
       </span>
       <span
-        class="t-swiper__pagination t-swiper__pagination-dots-bar"
+        class="t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom"
       >
         
         
@@ -58412,55 +58412,56 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/async.vue 1`] = `
 
 exports[`csr snapshot test > csr test ./src/swiper/demos/base.vue 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="t-swiper"
+  style="overflow: hidden;"
 >
   <div
-    style="padding: 0px 16px;"
+    class="t-swiper__container"
+    style="flex-direction: row;"
   >
+    
     <div
-      class="t-swiper"
-      style="overflow: hidden;"
+      class="t-swiper-item swiper-item--demo"
     >
-      <div
-        class="t-swiper__container"
-        style="flex-direction: row;"
-      >
-        
-        <div
-          class="t-swiper-item swiper-item--demo"
-        >
-          
-          <img
-            class="img"
-            src="https://tdesign.gtimg.com/site/swiper/01.png"
-          />
-          
-        </div>
-        <div
-          class="t-swiper-item swiper-item--demo"
-        >
-          
-          <img
-            class="img"
-            src="https://tdesign.gtimg.com/site/swiper/02.png"
-          />
-          
-        </div>
-        <div
-          class="t-swiper-item swiper-item--demo"
-        >
-          
-          <img
-            class="img"
-            src="https://tdesign.gtimg.com/site/swiper/03.png"
-          />
-          
-        </div>
-        
-      </div>
-      <!--v-if-->
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/01.png"
+      />
+      
     </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/02.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/03.png"
+      />
+      
+    </div>
+    
   </div>
+  
+  <!--v-if-->
+  <span
+    class="t-swiper__pagination t-swiper__pagination-dots t-swiper__pagination-bottom"
+  >
+    
+    
+    <!--v-if-->
+  </span>
+  
 </div>
 `;
 
@@ -58546,7 +58547,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/control.vue 1`] = `
       </span>
     </span>
     <span
-      class="t-swiper__pagination t-swiper__pagination-dots-bar"
+      class="t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom"
     >
       
       
@@ -58614,54 +58615,145 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/control.vue 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test ./src/swiper/demos/direction.vue 1`] = `
-<div>
+exports[`csr snapshot test > csr test ./src/swiper/demos/controlled.vue 1`] = `
+<div
+  class="t-swiper"
+  style="overflow: hidden;"
+>
   <div
-    class="t-swiper"
-    style="height: 180px; overflow: hidden;"
+    class="t-swiper__container"
+    style="flex-direction: row;"
   >
+    
     <div
-      class="t-swiper__container"
-      style="height: 180px; flex-direction: column;"
+      class="t-swiper-item swiper-item--demo"
     >
       
-      <div
-        class="t-swiper-item swiper-item--demo"
-      >
-        
-         itme1 
-        
-      </div>
-      <div
-        class="t-swiper-item swiper-item--demo"
-        style="background: blue;"
-      >
-        
-         item2 
-        
-      </div>
-      <div
-        class="t-swiper-item swiper-item--demo"
-        style="background: green;"
-      >
-        
-         item3 
-        
-      </div>
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/01.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/02.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/03.png"
+      />
       
     </div>
     
-    <!--v-if-->
+  </div>
+  
+  <span>
     <span
-      class="t-swiper__pagination t-swiper__pagination-fraction"
+      class="t-swiper__btn btn-prev"
     >
-      <!--v-if-->
-      <span>
-        0/0
-      </span>
+      <svg
+        class="t-icon t-icon-chevron-left"
+        fill="none"
+        height="1em"
+        style="font-size: 20px;"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
     </span>
+    <span
+      class="t-swiper__btn btn-next"
+    >
+      <svg
+        class="t-icon t-icon-chevron-right"
+        fill="none"
+        height="1em"
+        style="font-size: 20px;"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
+    </span>
+  </span>
+  <!--v-if-->
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./src/swiper/demos/direction.vue 1`] = `
+<div
+  class="t-swiper"
+  style="height: 180px; overflow: hidden;"
+>
+  <div
+    class="t-swiper__container"
+    style="height: 180px; flex-direction: column;"
+  >
+    
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/01.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/02.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/03.png"
+      />
+      
+    </div>
     
   </div>
+  
+  <!--v-if-->
+  <span
+    class="t-swiper__pagination t-swiper__pagination-fraction t-swiper__pagination-bottom"
+  >
+    <!--v-if-->
+    <span>
+      0/0
+    </span>
+  </span>
+  
 </div>
 `;
 
@@ -58740,7 +58832,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
         
         <!--v-if-->
         <span
-          class="t-swiper__pagination t-swiper__pagination-dots"
+          class="t-swiper__pagination t-swiper__pagination-dots t-swiper__pagination-bottom"
         >
           
           
@@ -58758,7 +58850,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
         >
           
           <div
-            class="t-swiper-item swiper-item--demo1"
+            class="t-swiper-item swiper-item--demo"
           >
             
             <img
@@ -58768,7 +58860,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
             
           </div>
           <div
-            class="t-swiper-item swiper-item--demo1"
+            class="t-swiper-item swiper-item--demo"
           >
             
             <img
@@ -58778,7 +58870,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
             
           </div>
           <div
-            class="t-swiper-item swiper-item--demo1"
+            class="t-swiper-item swiper-item--demo"
           >
             
             <img
@@ -58792,7 +58884,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
         
         <!--v-if-->
         <span
-          class="t-swiper__pagination t-swiper__pagination-fraction"
+          class="t-swiper__pagination t-swiper__pagination-fraction t-swiper__pagination-bottom"
         >
           <!--v-if-->
           <span>
@@ -58845,7 +58937,7 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
         
         <!--v-if-->
         <span
-          class="t-swiper__pagination t-swiper__pagination-dots-bar"
+          class="t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom"
         >
           
           
@@ -59020,116 +59112,150 @@ exports[`csr snapshot test > csr test ./src/swiper/demos/mobile.vue 1`] = `
         <!--v-if-->
         
       </div>
-      <!-- &lt;h2&gt;异步内容&lt;/h2&gt;
-        &lt;demo-async /&gt; -->
-      <!-- &lt;t-swiper :interval="3000" :autoplay="true"&gt;
-          &lt;t-swiper-item class="swiper-item--demo"&gt;
-            &lt;img src="https://tdesign.gtimg.com/site/swiper/01.png" class="img" /&gt;
-          &lt;/t-swiper-item&gt;
-          &lt;t-swiper-item class="swiper-item--demo"&gt;
-            &lt;img src="https://tdesign.gtimg.com/site/swiper/02.png" class="img" /&gt;
-          &lt;/t-swiper-item&gt;
-          &lt;t-swiper-item class="swiper-item--demo"&gt;
-            &lt;img src="https://tdesign.gtimg.com/site/swiper/03.png" class="img" /&gt;
-          &lt;/t-swiper-item&gt;
-          &lt;template #navigation&gt;
-            &lt;span&gt;&lt;/span&gt;
-            &lt;span&gt;&lt;/span&gt;
-            &lt;span&gt;&lt;/span&gt;
-            &lt;span&gt;&lt;/span&gt;
-          &lt;/template&gt;
-        &lt;/t-swiper&gt; -->
     </div>
     
   </div>
 </div>
 `;
 
-exports[`csr snapshot test > csr test ./src/swiper/demos/pagination-type.vue 1`] = `
-<div>
+exports[`csr snapshot test > csr test ./src/swiper/demos/navigation-type.vue 1`] = `
+<div
+  class="t-swiper"
+  style="overflow: hidden;"
+>
   <div
-    class="t-swiper"
-    style="overflow: hidden;"
+    class="t-swiper__container"
+    style="flex-direction: row;"
   >
+    
     <div
-      class="t-swiper__container"
-      style="flex-direction: row;"
+      class="t-swiper-item swiper-item--demo"
     >
       
-      <div
-        class="t-swiper-item swiper-item--demo"
-      >
-        
-         itme1 
-        
-      </div>
-      <div
-        class="t-swiper-item swiper-item--demo"
-        style="background: blue;"
-      >
-        
-         item2 
-        
-      </div>
-      <div
-        class="t-swiper-item swiper-item--demo"
-        style="background: green;"
-      >
-        
-         item3 
-        
-      </div>
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/01.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/02.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/03.png"
+      />
       
     </div>
     
-    <span>
-      <span
-        class="t-swiper__btn btn-prev"
-      >
-        <svg
-          class="t-icon t-icon-chevron-left"
-          fill="none"
-          height="1em"
-          style="font-size: 20px;"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </span>
-      <span
-        class="t-swiper__btn btn-next"
+  </div>
+  
+  <!--v-if-->
+  <span
+    class="t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom"
+  >
+    
+    
+    <!--v-if-->
+  </span>
+  
+</div>
+`;
+
+exports[`csr snapshot test > csr test ./src/swiper/demos/no-loop.vue 1`] = `
+<div
+  class="t-swiper"
+  style="overflow: hidden;"
+>
+  <div
+    class="t-swiper__container"
+    style="flex-direction: row;"
+  >
+    
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/01.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/02.png"
+      />
+      
+    </div>
+    <div
+      class="t-swiper-item swiper-item--demo"
+    >
+      
+      <img
+        class="img"
+        src="https://tdesign.gtimg.com/site/swiper/03.png"
+      />
+      
+    </div>
+    
+  </div>
+  
+  <span>
+    <span
+      class="t-swiper__btn btn-prev"
+    >
+      <svg
+        class="t-icon t-icon-chevron-left"
+        fill="none"
+        height="1em"
+        style="font-size: 20px;"
+        viewBox="0 0 16 16"
+        width="1em"
       >
-        <svg
-          class="t-icon t-icon-chevron-right"
-          fill="none"
-          height="1em"
-          style="font-size: 20px;"
-          viewBox="0 0 16 16"
-          width="1em"
-        >
-          <path
-            d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
-            fill="currentColor"
-            fill-opacity="0.9"
-          />
-        </svg>
-      </span>
+        <path
+          d="M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
     </span>
     <span
-      class="t-swiper__pagination t-swiper__pagination-fraction"
+      class="t-swiper__btn btn-next"
     >
-      <!--v-if-->
-      <span>
-        0/0
-      </span>
+      <svg
+        class="t-icon t-icon-chevron-right"
+        fill="none"
+        height="1em"
+        style="font-size: 20px;"
+        viewBox="0 0 16 16"
+        width="1em"
+      >
+        <path
+          d="M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z"
+          fill="currentColor"
+          fill-opacity="0.9"
+        />
+      </svg>
     </span>
-    
-  </div>
+  </span>
+  <!--v-if-->
+  
 </div>
 `;
 
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
index 643ca36e..de866081 100644
--- a/test/snap/__snapshots__/ssr.test.js.snap
+++ b/test/snap/__snapshots__/ssr.test.js.snap
@@ -485,36 +485,21 @@ exports[`ssr snapshot test > ssr test ./src/swipe-cell/demos/mobile.vue 1`] = `"
 
 exports[`ssr snapshot test > ssr test ./src/swipe-cell/demos/right-menu.vue 1`] = `"<!--[--><div class=\\"tdesign-mobile-demo-block\\"><!--v-if--><p class=\\"tdesign-mobile-demo-block__summary\\">右滑单操作</p><!--[--><div class=\\"t-swipe-cell\\"><div class=\\"t-swipe-cell__wrapper\\" style=\\"transform:translate3d(0px,0,0);\\"><div class=\\"t-swipe-cell__left\\" style=\\"width:auto;\\"><!--[--><button class=\\"t-button t-size-m t-button--base t-button--primary t-button--shape-square\\" role=\\"button\\" aria-disabled=\\"false\\"><!----><span class=\\"t-button__text\\"><!--[-->选择<!--]--></span></button><!--]--><!--[--><!--]--></div><div class=\\"content\\"><!--[--><div class=\\"t-cell t-cell--middle t-cell--bordered\\"><div class=\\"t-cell__left-icon\\"><!--v-if--><!--v-if--></div><div class=\\"t-cell__title\\">列表-右滑单操作<!--v-if--><!--v-if--></div><div class=\\"t-cell__note\\">辅助信息</div><!--v-if--></div><!--]--></div><div class=\\"t-swipe-cell__right\\" style=\\"width:auto;\\"><!----><!--[--><!--]--></div></div></div><!--]--></div><div class=\\"tdesign-mobile-demo-block\\" style=\\"margin-top:10px;\\"><!--v-if--><!--v-if--><!--[--><div class=\\"t-swipe-cell\\"><div class=\\"t-swipe-cell__wrapper\\" style=\\"transform:translate3d(0px,0,0);\\"><div class=\\"t-swipe-cell__left\\" style=\\"width:auto;\\"><!--[--><button class=\\"t-button t-size-m t-button--base t-button--primary t-button--shape-square\\" role=\\"button\\" aria-disabled=\\"false\\"><!----><span class=\\"t-button__text\\"><!--[-->选择<!--]--></span></button><!--]--><!--[--><!--]--></div><div class=\\"content\\"><!--[--><div class=\\"t-cell t-cell--middle t-cell--bordered\\"><div class=\\"t-cell__left-icon\\"><!--v-if--><!--v-if--></div><div class=\\"t-cell__title\\">列表-右滑单操作<!--v-if--><!--v-if--></div><div class=\\"t-cell__note\\">辅助信息</div><!--v-if--></div><!--]--></div><div class=\\"t-swipe-cell__right\\" style=\\"width:auto;\\"><!----><!--[--><!--]--></div></div></div><!--]--></div><!--]-->"`;
 
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/async.vue 1`] = `"<div class=\\"tdesign-mobile-demo\\"><div style=\\"padding:0 16px;\\"><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar\\"><!--[--><!--]--><!--v-if--></span><!--]--></div></div></div>"`;
-
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/base.vue 1`] = `"<div class=\\"tdesign-mobile-demo\\"><div style=\\"padding:0 16px;\\"><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--v-if--></div></div></div>"`;
-
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/control.vue 1`] = `"<div data-v-7617ffc0><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\" data-v-7617ffc0><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\" data-v-7617ffc0><!--[--> item1 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:blue;\\" data-v-7617ffc0><!--[--> item2 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:green;\\" data-v-7617ffc0><!--[--> item3 <!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><p class=\\"summary\\" data-v-7617ffc0> 手动指定页数： <button class=\\"t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第一页<!--]--></span></button><button class=\\"t-button t-size-s t-button--base t-button--default t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第二页<!--]--></span></button><button class=\\"t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第三页<!--]--></span></button></p><p class=\\"summary\\" data-v-7617ffc0>当前页 1</p></div>"`;
-
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/direction.vue 1`] = `"<div><div style=\\"height:180px;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:180px;flex-direction:column;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--> itme1 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:blue;\\"><!--[--> item2 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:green;\\"><!--[--> item3 <!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-fraction\\"><!--v-if--><span>0/0</span></span><!--]--></div></div>"`;
-
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/mobile.vue 1`] = `
-"<div class=\\"tdesign-mobile-demo\\"><h1 class=\\"title\\">Swiper 轮播</h1><p class=\\"summary\\">用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置</p><div class=\\"tdesign-mobile-demo-block\\"><h2 class=\\"tdesign-mobile-demo-block__title\\">01 类型</h2><p class=\\"tdesign-mobile-demo-block__summary\\">轮播图的多种样式</p><!--[--><div style=\\"padding:0 16px;\\"><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><div style=\\"height:180px;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:180px;flex-direction:column;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo1\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo1\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo1\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-fraction\\"><!--v-if--><span>0/0</span></span><!--]--></div><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div><!-- no loop --><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div><!-- <h2>异步内容</h2>
-        <demo-async /> --><!-- <t-swiper :interval=\\"3000\\" :autoplay=\\"true\\">
-          <t-swiper-item class=\\"swiper-item--demo\\">
-            <img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\" />
-          </t-swiper-item>
-          <t-swiper-item class=\\"swiper-item--demo\\">
-            <img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\" />
-          </t-swiper-item>
-          <t-swiper-item class=\\"swiper-item--demo\\">
-            <img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\" />
-          </t-swiper-item>
-          <template #navigation>
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
-          </template>
-        </t-swiper> --></div><!--]--></div></div>"
-`;
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/async.vue 1`] = `"<div class=\\"tdesign-mobile-demo\\"><div style=\\"padding:0 16px;\\"><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/base.vue 1`] = `"<div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/control.vue 1`] = `"<div data-v-7617ffc0><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\" data-v-7617ffc0><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\" data-v-7617ffc0><!--[--> item1 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:blue;\\" data-v-7617ffc0><!--[--> item2 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:green;\\" data-v-7617ffc0><!--[--> item3 <!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><p class=\\"summary\\" data-v-7617ffc0> 手动指定页数： <button class=\\"t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第一页<!--]--></span></button><button class=\\"t-button t-size-s t-button--base t-button--default t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第二页<!--]--></span></button><button class=\\"t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle\\" role=\\"button\\" aria-disabled=\\"false\\" data-v-7617ffc0><!----><span class=\\"t-button__text\\"><!--[-->第三页<!--]--></span></button></p><p class=\\"summary\\" data-v-7617ffc0>当前页 1</p></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/controlled.vue 1`] = `"<div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/direction.vue 1`] = `"<div style=\\"height:180px;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:180px;flex-direction:column;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-fraction t-swiper__pagination-bottom\\"><!--v-if--><span>0/0</span></span><!--]--></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/mobile.vue 1`] = `"<div class=\\"tdesign-mobile-demo\\"><h1 class=\\"title\\">Swiper 轮播</h1><p class=\\"summary\\">用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置</p><div class=\\"tdesign-mobile-demo-block\\"><h2 class=\\"tdesign-mobile-demo-block__title\\">01 类型</h2><p class=\\"tdesign-mobile-demo-block__summary\\">轮播图的多种样式</p><!--[--><div style=\\"padding:0 16px;\\"><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><div style=\\"height:180px;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:180px;flex-direction:column;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-fraction t-swiper__pagination-bottom\\"><!--v-if--><span>0/0</span></span><!--]--></div><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div><!-- no loop --><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div></div><!--]--></div></div>"`;
+
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/navigation-type.vue 1`] = `"<div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><!--v-if--><span class=\\"t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom\\"><!--[--><!--]--><!--v-if--></span><!--]--></div>"`;
 
-exports[`ssr snapshot test > ssr test ./src/swiper/demos/pagination-type.vue 1`] = `"<div><div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--> itme1 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:blue;\\"><!--[--> item2 <!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\" style=\\"background:green;\\"><!--[--> item3 <!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><span class=\\"t-swiper__pagination t-swiper__pagination-fraction\\"><!--v-if--><span>0/0</span></span><!--]--></div></div>"`;
+exports[`ssr snapshot test > ssr test ./src/swiper/demos/no-loop.vue 1`] = `"<div style=\\"height:undefinedpx;overflow:hidden;\\" class=\\"t-swiper\\"><div class=\\"t-swiper__container\\" style=\\"height:undefinedpx;flex-direction:row;\\"><!--[--><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/01.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/02.png\\" class=\\"img\\"><!--]--></div><div class=\\"t-swiper-item swiper-item--demo\\"><!--[--><img src=\\"https://tdesign.gtimg.com/site/swiper/03.png\\" class=\\"img\\"><!--]--></div><!--]--></div><!--[--><span><span class=\\"t-swiper__btn btn-prev\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M9.54 3.54l.92.92L6.92 8l3.54 3.54-.92.92L5.08 8l4.46-4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span><span class=\\"t-swiper__btn btn-next\\"><svg fill=\\"none\\" viewbox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\" style=\\"font-size:20px;\\"><path fill=\\"currentColor\\" d=\\"M6.46 12.46l-.92-.92L9.08 8 5.54 4.46l.92-.92L10.92 8l-4.46 4.46z\\" fill-opacity=\\"0.9\\"></path></svg></span></span><!--v-if--><!--]--></div>"`;
 
 exports[`ssr snapshot test > ssr test ./src/switch/demos/base.vue 1`] = `"<div class=\\"cell-base\\"><div class=\\"t-cell-group\\"><div class=\\"t-cell-group__title\\"><!--[-->基础开关<!--]--></div><div class=\\"t-cell-group__container\\"><!--[--><div class=\\"t-cell t-cell--middle t-cell--bordered\\"><div class=\\"t-cell__left-icon\\"><!--v-if--><!--v-if--></div><div class=\\"t-cell__title\\">标题<!--v-if--><!--v-if--></div><div class=\\"t-cell__note\\"><!--[--><span class=\\"t-switch t-is-checked\\"><!--v-if--><span class=\\"t-switch__node\\" style=\\"\\"></span></span><!--]--></div><!--v-if--></div><div class=\\"t-cell t-cell--middle t-cell--bordered\\"><div class=\\"t-cell__left-icon\\"><!--v-if--><!--v-if--></div><div class=\\"t-cell__title\\">标题<!--v-if--><!--v-if--></div><div class=\\"t-cell__note\\"><!--[--><span class=\\"t-switch\\"><!--v-if--><span class=\\"t-switch__node\\" style=\\"\\"></span></span><!--]--></div><!--v-if--></div><!--]--></div></div></div>"`;