diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper-digit.gif b/zh-cn/application-dev/reference/arkui-ts/figures/swiper-digit.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2873aa12e2e64ac904f88aef7fa8a48dd70fcd4d
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/swiper-digit.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper-dot.gif b/zh-cn/application-dev/reference/arkui-ts/figures/swiper-dot.gif
new file mode 100644
index 0000000000000000000000000000000000000000..159d58f9ee979616b60352da34f483010a1ea386
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/swiper-dot.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif
index 9ea7c2c1367080f288a514ccd1dce307badeeab9..bd38d6a7e3283c15269079284432bbace9f20df5 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/swiper.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
index 072b3be0f4f87de366cc64bab8a0114d6973f82f..13d3463afa71fa07557941314bce90dcab964c0c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -162,6 +162,7 @@ finishAnimation(callback?: () => void): void
 
 ## 示例
 
+### 示例1
 ```ts
 // xxx.ets
 class MyDataSource implements IDataSource {
@@ -261,3 +262,163 @@ struct SwiperExample {
 ```
 
 ![swiper](figures/swiper.gif)
+
+### 示例2
+```ts
+// xxx.ets
+class MyDataSource implements IDataSource {
+  private list: number[] = []
+  private listener: DataChangeListener
+
+  constructor(list: number[]) {
+    this.list = list
+  }
+
+  totalCount(): number {
+    return this.list.length
+  }
+
+  getData(index: number): any {
+    return this.list[index]
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    this.listener = listener
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Entry
+@Component
+struct SwiperExample {
+  private swiperController: SwiperController = new SwiperController()
+  private data: MyDataSource = new MyDataSource([])
+
+  aboutToAppear(): void {
+    let list = []
+    for (var i = 1; i <= 10; i++) {
+      list.push(i.toString());
+    }
+    this.data = new MyDataSource(list)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Swiper(this.swiperController) {
+        LazyForEach(this.data, (item: string) => {
+          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
+        }, item => item)
+      }
+      .cachedCount(2)
+      .index(1)
+      .autoPlay(true)
+      .interval(4000)
+      .indicator(Indicator.dot()
+        .itemWidth(15)
+        .itemHeight(15)
+        .selectedItemWidth(15)
+        .selectedItemHeight(15)
+        .color(Color.Gray)
+        .selectedColor(Color.Blue))
+      .loop(true)
+      .duration(1000)
+      .itemSpace(0)
+      .displayArrow(true,true)
+      Row({ space: 12 }) {
+        Button('showNext')
+          .onClick(() => {
+            this.swiperController.showNext()
+          })
+        Button('showPrevious')
+          .onClick(() => {
+            this.swiperController.showPrevious()
+          })
+      }.margin(5)
+    }.width('100%')
+    .margin({ top: 5 })
+  }
+}
+```
+![swiper](figures/swiper-dot.gif)
+
+### 示例3
+```ts
+// xxx.ets
+class MyDataSource implements IDataSource {
+  private list: number[] = []
+  private listener: DataChangeListener
+
+  constructor(list: number[]) {
+    this.list = list
+  }
+
+  totalCount(): number {
+    return this.list.length
+  }
+
+  getData(index: number): any {
+    return this.list[index]
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+    this.listener = listener
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Entry
+@Component
+struct SwiperExample {
+  private swiperController: SwiperController = new SwiperController()
+  private data: MyDataSource = new MyDataSource([])
+
+  aboutToAppear(): void {
+    let list = []
+    for (var i = 1; i <= 10; i++) {
+      list.push(i.toString());
+    }
+    this.data = new MyDataSource(list)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Swiper(this.swiperController) {
+        LazyForEach(this.data, (item: string) => {
+          Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
+        }, item => item)
+      }
+      .cachedCount(2)
+      .index(1)
+      .autoPlay(true)
+      .interval(4000)
+      .indicator(Indicator.digit()
+        .right(130)
+        .top(200)
+        .fontColor(Color.Gray)
+        .selectedFontColor(Color.Gray)
+        .digitFont({size:20,weight:FontWeight.Bold})
+        .selectedDigitFont({size:20,weight:FontWeight.Normal}))
+      .loop(true)
+      .duration(1000)
+      .itemSpace(0)
+      .displayArrow(true,false)
+      Row({ space: 12 }) {
+        Button('showNext')
+          .onClick(() => {
+            this.swiperController.showNext()
+          })
+        Button('showPrevious')
+          .onClick(() => {
+            this.swiperController.showPrevious()
+          })
+      }.margin(5)
+    }.width('100%')
+    .margin({ top: 5 })
+  }
+}
+```
+![swiper](figures/swiper-digit.gif)
\ No newline at end of file