diff --git a/packages/rax-swiper/demo/index.css b/packages/rax-swiper/demo/index.css
index 3601d4d3..9548e66c 100644
--- a/packages/rax-swiper/demo/index.css
+++ b/packages/rax-swiper/demo/index.css
@@ -22,3 +22,30 @@
   width: 340rpx;
   height: 80rpx;
 }
+
+.swiper-pagination {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: auto !important;
+  left: auto !important;
+  margin: 0;
+}
+
+.swiper-pagination-bullet {
+  padding: 5px 10px;
+  border-radius: 0;
+  width: auto;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 12px;
+  color:#000;
+  opacity: 1;
+  background: rgba(0,0,0,0.2);
+}
+
+.swiper-pagination-bullet-active {
+  color:#fff;
+  background: #007aff;
+}
diff --git a/packages/rax-swiper/demo/index.jsx b/packages/rax-swiper/demo/index.jsx
index 6a835d69..49ffa170 100644
--- a/packages/rax-swiper/demo/index.jsx
+++ b/packages/rax-swiper/demo/index.jsx
@@ -20,6 +20,7 @@ class App extends Component {
   }
 
   render() {
+    const menu = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4'];
     return (
       <View style={{
         width: 750
@@ -33,7 +34,12 @@ class App extends Component {
           }}
           onSlideChange={() => console.log('slide change')}
           onSwiper={(swiper) => swiperEle = swiper}
-          pagination={{ clickable: true }}
+          pagination={{
+            clickable: true,
+            renderBullet: (index, className) => {
+              return '<span class="' + className + '">' + (menu[index]) + '</span>';
+            },
+          }}
           initialSlide={2}
         >
           <SwiperSlide key="1">Slide 1</SwiperSlide>