diff --git a/components/carousel/demo/customArrows.md b/components/carousel/demo/customArrows.md
index 4f8baf81a..b294e2d1c 100644
--- a/components/carousel/demo/customArrows.md
+++ b/components/carousel/demo/customArrows.md
@@ -11,21 +11,20 @@ Custom arrows display
 ```html
 <template>
   <a-carousel arrows>
-    <template slot="prevArrow" slot-scope="props">
-      <div
-        class="custom-slick-arrow"
-      >
-        <a-icon type="left-square" />
-      </div>
-    </template>
-    <template slot="nextArrow" slot-scope="props">
-      <div
-        class="custom-slick-arrow"
-        style="right: -20px"
-      >
-        <a-icon type="right-square" />
-      </div>
-    </template>
+    <div
+      slot="prevArrow" slot-scope="props"
+      class="custom-slick-arrow"
+      style="left: 10px;zIndex: 1"
+    >
+      <a-icon type="left-circle" />
+    </div>
+    <div
+      slot="nextArrow" slot-scope="props"
+      class="custom-slick-arrow"
+      style="right: 10px"
+    >
+      <a-icon type="right-circle" />
+    </div>
     <div><h3>1</h3></div>
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
@@ -46,16 +45,18 @@ export default {}
 }
 
 .ant-carousel >>> .custom-slick-arrow {
-  display: block;
+  width: 25px;
+  height: 25px;
   font-size: 25px;
-  background: #fff;
-  color: #5d5959;
+  color: #fff;
+  background-color: rgba(31,45,61,.11);
+  opacity: 0.3;
 }
 .ant-carousel >>> .custom-slick-arrow:before {
   display: none;
 }
 .ant-carousel >>> .custom-slick-arrow:hover {
-  color: #403d3d
+  opacity: 0.5;
 }
 
 .ant-carousel >>> .slick-slide  h3 {