diff --git a/UI/Swiper/README.md b/UI/Swiper/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..59720dd11166c5bbadd16f065798b2b739f01801
--- /dev/null
+++ b/UI/Swiper/README.md
@@ -0,0 +1,16 @@
+# Swiper<a name="EN-US_TOPIC_0000001179772111"></a>
+
+### Introduction<a name="section104mcpsimp"></a>
+
+This sample shows how to use the  **<swiper\>**  component in the JavaScript UI framework. The component provides a container that allows users to switch among child components by swiping operations.
+
+### Usage<a name="section107mcpsimp"></a>
+
+1. On the sample app, swipe the images in the container to switch among the child components.
+
+2. On the sample app, touch the buttons to switch among the child components.
+
+### Constraints<a name="section111mcpsimp"></a>
+
+This sample can only be run on standard-system devices.
+
diff --git a/UI/Swiper/README_zh.md b/UI/Swiper/README_zh.md
new file mode 100644
index 0000000000000000000000000000000000000000..fb283cd6d27acaa7faa7e8a1c04df343d50f3906
--- /dev/null
+++ b/UI/Swiper/README_zh.md
@@ -0,0 +1,16 @@
+# 滑动容器<a name="ZH-CN_TOPIC_0000001179772111"></a>
+
+### 简介<a name="section104mcpsimp"></a>
+
+本示例展示了JS UI框架中swiper组件的使用方法，该组件提供切换子组件显示的能力。
+
+### 使用说明<a name="section107mcpsimp"></a>
+
+1.滑动容器中的图片，切换子组件的内容；
+
+2.点击按钮，触发点击事件，切换子组件内容。
+
+### 约束与限制<a name="section111mcpsimp"></a>
+
+本示例仅支持标准系统上运行。
+
diff --git a/UI/Swiper/build.gradle b/UI/Swiper/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..cec93fd7172f7a65b0bd0999799b6f57215588f1
--- /dev/null
+++ b/UI/Swiper/build.gradle
@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+}
+	
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.3-RC'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+}
diff --git a/UI/Swiper/entry/build.gradle b/UI/Swiper/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..1ee2912960d74e6dfa19c49ae1742ab62da51ace
--- /dev/null
+++ b/UI/Swiper/entry/build.gradle
@@ -0,0 +1,18 @@
+apply plugin: 'com.huawei.ohos.hap'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#ZH-CN_TOPIC_0000001154985555__section1112183053510
+ohos {
+    compileSdkVersion 6
+    defaultConfig {
+        compatibleSdkVersion 6
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+    supportSystem "standard"
+}
diff --git a/UI/Swiper/entry/src/main/config.json b/UI/Swiper/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..b714a311aa03452af68c1d42292f02def0f690eb
--- /dev/null
+++ b/UI/Swiper/entry/src/main/config.json
@@ -0,0 +1,56 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.swiper",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.swiper",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.swiper.MainAbility",
+    "deviceType": [
+      "phone"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.swiper.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "label": "$string:app_name",
+        "type": "page",
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/UI/Swiper/entry/src/main/js/default/app.js b/UI/Swiper/entry/src/main/js/default/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/app.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    onCreate() {
+        console.info('AceApplication onCreate');
+    },
+    onDestroy() {
+        console.info('AceApplication onDestroy');
+    }
+};
diff --git a/UI/Swiper/entry/src/main/js/default/common/images/1.jpg b/UI/Swiper/entry/src/main/js/default/common/images/1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3af559f74358e9f54aebbb6f765bf9f5f493760e
Binary files /dev/null and b/UI/Swiper/entry/src/main/js/default/common/images/1.jpg differ
diff --git a/UI/Swiper/entry/src/main/js/default/common/images/2.jpg b/UI/Swiper/entry/src/main/js/default/common/images/2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d26a30caccb7c77a7b37f21b0d819cf7b969bf9c
Binary files /dev/null and b/UI/Swiper/entry/src/main/js/default/common/images/2.jpg differ
diff --git a/UI/Swiper/entry/src/main/js/default/common/images/3.jpg b/UI/Swiper/entry/src/main/js/default/common/images/3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d13ed7e5c8391eef6dd9614743e0eee1b0463986
Binary files /dev/null and b/UI/Swiper/entry/src/main/js/default/common/images/3.jpg differ
diff --git a/UI/Swiper/entry/src/main/js/default/i18n/en-US.json b/UI/Swiper/entry/src/main/js/default/i18n/en-US.json
new file mode 100644
index 0000000000000000000000000000000000000000..845dfb1ee675c168148af4b8195538760640f095
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/i18n/en-US.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "showPrevious": "previous",
+    "showNext": "showNext"
+  }
+}
\ No newline at end of file
diff --git a/UI/Swiper/entry/src/main/js/default/i18n/zh-CN.json b/UI/Swiper/entry/src/main/js/default/i18n/zh-CN.json
new file mode 100644
index 0000000000000000000000000000000000000000..95587e745a28c4d23957acc3d1c06a57c02aa648
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/i18n/zh-CN.json
@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "showPrevious": "上一页",
+    "showNext": "下一页"
+  }
+}
\ No newline at end of file
diff --git a/UI/Swiper/entry/src/main/js/default/pages/index/index.css b/UI/Swiper/entry/src/main/js/default/pages/index/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a52586d11bd66460390ba435771553c1c06492c4
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/pages/index/index.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.swiper {
+    height: 250px;
+    indicator-size: 8px;
+    indicator-color: lemonchiffon;
+    align-content: center;
+}
+
+.divbutton {
+    height: 40px;
+    justify-content: space-around;
+}
+
+.button {
+    width: 100px;
+    height: 40px;
+    font-size: 16px;
+}
+
+.image {
+    width: 100%;
+    height: 200px;
+}
diff --git a/UI/Swiper/entry/src/main/js/default/pages/index/index.hml b/UI/Swiper/entry/src/main/js/default/pages/index/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..6fa44f1d095e0e6b96c657b2368fb4e99ba9ee49
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/pages/index/index.hml
@@ -0,0 +1,32 @@
+<!--
+ Copyright (c) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+
+<div class="container">
+    <swiper class="swiper" id="swiper" index="0" duration="2000" autoplay="false" loop="true" indicator="true">
+        <div class="swiperContent">
+            <image src="common/images/1.jpg" class="image"></image>
+        </div>
+        <div class="swiperContent">
+            <image src="common/images/2.jpg" class="image"></image>
+        </div>
+        <div class="swiperContent">
+            <image src="common/images/3.jpg" class="image"></image>
+        </div>
+    </swiper>
+    <div class="divbutton">
+        <button class="button" onclick="showPrevious">{{ $t('strings.showPrevious') }}</button>
+        <button class="button" onclick="showNext">{{ $t('strings.showNext') }}</button>
+    </div>
+</div>
diff --git a/UI/Swiper/entry/src/main/js/default/pages/index/index.js b/UI/Swiper/entry/src/main/js/default/pages/index/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..28732b07c4f85588bc7bd10b85ad6f54704a4418
--- /dev/null
+++ b/UI/Swiper/entry/src/main/js/default/pages/index/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+    showNext: function () {
+        this.$element('swiper').showNext()
+    },
+    showPrevious: function () {
+        this.$element('swiper').showPrevious()
+    }
+}
diff --git a/UI/Swiper/entry/src/main/resources/base/element/string.json b/UI/Swiper/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..02c8c318214d93ff5ff7b63522af39fa0a1017f5
--- /dev/null
+++ b/UI/Swiper/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Swiper"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/Swiper/entry/src/main/resources/base/media/icon.png b/UI/Swiper/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/UI/Swiper/entry/src/main/resources/base/media/icon.png differ
diff --git a/UI/Swiper/entry/src/main/resources/en/element/string.json b/UI/Swiper/entry/src/main/resources/en/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..346e394f116fd8f787ac0bdbe809ecb5c445b430
--- /dev/null
+++ b/UI/Swiper/entry/src/main/resources/en/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "Swiper"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
diff --git a/UI/Swiper/entry/src/main/resources/zh/element/string.json b/UI/Swiper/entry/src/main/resources/zh/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..ad9b9243cf6ca0447029bafd5bacbebf98dbe3fc
--- /dev/null
+++ b/UI/Swiper/entry/src/main/resources/zh/element/string.json
@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "滑动容器"
+    },
+    {
+      "name": "mainability_description",
+      "value": "Java_Empty Ability"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/UI/Swiper/settings.gradle b/UI/Swiper/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07
--- /dev/null
+++ b/UI/Swiper/settings.gradle
@@ -0,0 +1 @@
+include ':entry'