feat: add carousel customArrows demo

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -176,6 +176,100 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
+<div class="ant-carousel">
+  <div class="slick-slider slick-initialized">
+    <div class="custom-slick-arrow slick-arrow slick-prev" style="display: block;">
+      <i class="anticon anticon-left-square"></i>
+    </div>
+    <div class="slick-list">
+      <div class="slick-track" style="width: 900%; left: -100%;">
+        <div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>4</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>1</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>2</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>3</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>4</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>1</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>2</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>3</h3>
+            </div>
+          </div>
+        </div>
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;">
+              <h3>4</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="custom-slick-arrow slick-arrow slick-next" style="right: -20px; display: block;">
+      <i class="anticon anticon-right-square"></i>
+    </div>
+    <ul class="slick-dots" style="display: block;">
+      <li class="slick-active">
+        <button class="">1</button>
+      </li>
+      <li class="">
+        <button class="">2</button>
+      </li>
+      <li class="">
+        <button class="">3</button>
+      </li>
+      <li class="">
+        <button class="">4</button>
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized">

components/carousel/demo/customArrows.md

@@ -0,0 +1,65 @@
+<cn>
+#### 自定义箭头
+自定义箭头展示。
+</cn>
+
+<us>
+#### Custom Arrows
+Custom arrows display
+</us>
+
+```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><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </a-carousel>
+</template>
+<script>
+export default {}
+</script>
+<style scoped>
+/* For demo */
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ant-carousel >>> .custom-slick-arrow {
+  display: block;
+  font-size: 25px;
+  background: #fff;
+  color: #5d5959;
+}
+.ant-carousel >>> .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel >>> .custom-slick-arrow:hover {
+  color: #403d3d
+}
+
+.ant-carousel >>> .slick-slide  h3 {
+  color: #fff;
+}
+</style>
+```

components/carousel/demo/index.vue

@@ -4,6 +4,7 @@ import Fade from './fade'
 import Autoplay from './autoplay'
 import Vertical from './vertical'
 import CustomPaging from './customPaging'
+import CustomArrows from './customArrows'
 
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
@@ -42,6 +43,7 @@ export default {
         <Fade />
         <Autoplay />
         <CustomPaging />
+        <CustomArrows />
         <api>
           <CN slot='cn' />
           <US />

components/vc-slick/src/arrows.js

@@ -35,7 +35,7 @@ export const PrevArrow = {
       domProps: {
         'data-role': 'none',
       },
-      class: classnames(prevClasses),
+      class: prevClasses,
       style: { display: 'block' },
       on: {
         click: prevHandler,
@@ -53,7 +53,14 @@ export const PrevArrow = {
         ...{
           props: customProps,
         },
-      }), {})
+      }), {
+        key: '0',
+        class: prevClasses,
+        style: { display: 'block' },
+        on: {
+          click: prevHandler,
+        },
+      })
     } else {
       prevArrow = (
         <button key='0' type='button' {...prevArrowProps}>
@@ -96,7 +103,7 @@ export const NextArrow = {
       domProps: {
         'data-role': 'none',
       },
-      class: classnames(nextClasses),
+      class: nextClasses,
       style: { display: 'block' },
       on: {
         click: nextHandler,
@@ -114,7 +121,14 @@ export const NextArrow = {
         ...{
           props: customProps,
         },
-      }), {})
+      }), {
+        key: '1',
+        class: nextClasses,
+        style: { display: 'block' },
+        on: {
+          click: nextHandler,
+        },
+      })
     } else {
       nextArrow = (
         <button key='1' type='button' {...nextArrowProps}>