From c499aab3673cc0e0bd8f77a78f303f5d677f4754 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Tue, 11 Feb 2020 11:49:08 +0800
Subject: [PATCH] feat: update carousel

---
 build/config.js                               |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 123 +++++++++---------
 .../__snapshots__/index.test.js.snap          |  65 +++++++++
 components/carousel/__tests__/index.test.js   |  59 +++++++--
 components/carousel/demo/index.vue            |   4 +-
 components/carousel/demo/position.md          |  54 ++++++++
 components/carousel/demo/vertical.md          |  37 ------
 components/carousel/index.en-US.md            |  26 ++--
 components/carousel/index.jsx                 |  37 ++++--
 components/carousel/index.zh-CN.md            |  30 ++---
 types/carousel.d.ts                           |   5 +-
 11 files changed, 293 insertions(+), 149 deletions(-)
 create mode 100644 components/carousel/__tests__/__snapshots__/index.test.js.snap
 create mode 100644 components/carousel/demo/position.md
 delete mode 100644 components/carousel/demo/vertical.md

diff --git a/build/config.js b/build/config.js
index 66fb78626..a4b3920b7 100644
--- a/build/config.js
+++ b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'card', // dev components
+    componentName: 'carousel', // dev components
   },
 };
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
index 9f4e85892..52d8a0f6e 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -70,7 +70,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom undefined" 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>
@@ -150,7 +150,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom undefined" 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>
@@ -238,7 +238,7 @@ exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
           <path d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path>
           <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
         </svg></i></div>
-    <ul class="slick-dots" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom undefined" 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>
@@ -300,7 +300,7 @@ exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
         </div>
       </div>
     </div><button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button>
-    <ul class="slick-dots slick-thumb" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom slick-thumb" style="display: block;">
       <li class="slick-active"><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></a></li>
       <li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></a></li>
       <li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></a></li>
@@ -345,7 +345,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom undefined" 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>
@@ -355,82 +355,85 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
-<div class="ant-carousel ant-carousel-vertical">
-  <div class="slick-slider slick-vertical slick-initialized">
-    <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>
+exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
+<div>
+  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
+  <div class="ant-carousel">
+    <div class="slick-slider slick-initialized">
+      <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>
-        <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 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>
-        <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 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>
-        <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 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>
-        <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 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>
-        <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 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>
-        <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 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>
-        <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 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>
-        <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 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>
+      <ul class="slick-dots slick-dots-top undefined" 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>
-    <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>
 `;
diff --git a/components/carousel/__tests__/__snapshots__/index.test.js.snap b/components/carousel/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..fed7985b7
--- /dev/null
+++ b/components/carousel/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel should works for dotPosition bottom 1`] = `
+<div class="ant-carousel">
+  <div class="slick-slider slick-initialized">
+    <div class="slick-list">
+      <div class="slick-track" style="width: 100%; left: 0%;">
+        <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition left 1`] = `
+<div class="ant-carousel ant-carousel-vertical">
+  <div class="slick-slider slick-vertical slick-initialized">
+    <div class="slick-list">
+      <div class="slick-track" style="width: 100%; left: 0%;">
+        <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition right 1`] = `
+<div class="ant-carousel ant-carousel-vertical">
+  <div class="slick-slider slick-vertical slick-initialized">
+    <div class="slick-list">
+      <div class="slick-track" style="width: 100%; left: 0%;">
+        <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition top 1`] = `
+<div class="ant-carousel">
+  <div class="slick-slider slick-initialized">
+    <div class="slick-list">
+      <div class="slick-track" style="width: 100%; left: 0%;">
+        <div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 100%;">
+          <div>
+            <div tabindex="-1" class="" style="width: 100%; display: inline-block;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 2b39209cf..a14652f38 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -1,14 +1,23 @@
 import { mount } from '@vue/test-utils';
 import { asyncExpect } from '@/tests/utils';
 import Carousel from '..';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Carousel', () => {
+  mountTest(Carousel);
+  // beforeEach(() => {
+  //   jest.useFakeTimers();
+  // });
+
+  // afterEach(() => {
+  //   jest.useRealTimers();
+  // });
   it('should has innerSlider', () => {
     const props = {
       slots: {
         default: '<div />',
       },
-      sync: true,
+      sync: false,
     };
     const wrapper = mount(Carousel, props);
     const { innerSlider, $refs } = wrapper.vm;
@@ -22,7 +31,7 @@ describe('Carousel', () => {
       slots: {
         default: '<div>1</div><div>2</div><div>3</div>',
       },
-      sync: true,
+      sync: false,
     };
     const wrapper = mount(Carousel, props);
     const { prev, next, goTo } = wrapper.vm;
@@ -56,14 +65,14 @@ describe('Carousel', () => {
       slots: {
         default: '<div>1</div><div>2</div><div>3</div>',
       },
-      sync: true,
+      sync: false,
     };
     const wrapper = mount(Carousel, props);
     const spy = jest.spyOn(wrapper.vm.$refs.slick.innerSlider, 'handleAutoPlay');
     window.resizeTo(1000);
-    expect(spy).not.toBeCalled();
+    expect(spy).not.toHaveBeenCalled();
     await new Promise(resolve => setTimeout(resolve, 1000));
-    expect(spy).toBeCalled();
+    expect(spy).toHaveBeenCalled();
   });
 
   it('cancel resize listener when unmount', async () => {
@@ -74,14 +83,48 @@ describe('Carousel', () => {
       slots: {
         default: '<div>1</div><div>2</div><div>3</div>',
       },
-      sync: true,
+      sync: false,
     };
     const wrapper = mount(Carousel, props);
     const { onWindowResized } = wrapper.vm;
     const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel');
     const spy2 = jest.spyOn(window, 'removeEventListener');
     wrapper.destroy();
-    expect(spy).toBeCalled();
-    expect(spy2).toBeCalledWith('resize', onWindowResized);
+    expect(spy).toHaveBeenCalled();
+    expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
+  });
+
+  describe('should works for dotPosition', () => {
+    ['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
+      it(dotPosition, () => {
+        const wrapper = mount({
+          render() {
+            return (
+              <Carousel dotPosition={dotPosition}>
+                <div />
+              </Carousel>
+            );
+          },
+        });
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+  });
+
+  it('warning', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount({
+      render() {
+        return (
+          <Carousel vertical>
+            <div />
+          </Carousel>
+        );
+      },
+    });
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Warning: [antdv: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
+    );
+    warnSpy.mockRestore();
   });
 });
diff --git a/components/carousel/demo/index.vue b/components/carousel/demo/index.vue
index 61a6245cc..510018eb0 100644
--- a/components/carousel/demo/index.vue
+++ b/components/carousel/demo/index.vue
@@ -2,7 +2,7 @@
 import Basic from './basic';
 import Fade from './fade';
 import Autoplay from './autoplay';
-import Vertical from './vertical';
+import Position from './position';
 import CustomPaging from './customPaging';
 import CustomArrows from './customArrows';
 
@@ -42,7 +42,7 @@ export default {
       <div>
         <md cn={md.cn} us={md.us} />
         <Basic />
-        <Vertical />
+        <Position />
         <Fade />
         <Autoplay />
         <CustomPaging />
diff --git a/components/carousel/demo/position.md b/components/carousel/demo/position.md
new file mode 100644
index 000000000..1c7bdb8cb
--- /dev/null
+++ b/components/carousel/demo/position.md
@@ -0,0 +1,54 @@
+<cn>
+#### 位置
+位置有 4 个方向。
+</cn>
+
+<us>
+#### Position
+There are 4 position options available.
+</us>
+
+```tpl
+<template>
+<div>
+  <a-radio-group
+    v-model="dotPosition"
+    style="margin-bottom: 8px"
+  >
+    <a-radio-button value="top">Top</a-radio-button>
+    <a-radio-button value="bottom">Bottom</a-radio-button>
+    <a-radio-button value="left">Left</a-radio-button>
+    <a-radio-button value="right">Right</a-radio-button>
+  </a-radio-group>
+  <a-carousel :dotPosition="dotPosition">
+    <div><h3>1</h3></div>
+    <div><h3>2</h3></div>
+    <div><h3>3</h3></div>
+    <div><h3>4</h3></div>
+  </a-carousel>
+</div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        dotPosition: 'top',
+      }
+    },
+  };
+</script>
+<style scoped>
+  /* For demo */
+  .ant-carousel >>> .slick-slide {
+    text-align: center;
+    height: 160px;
+    line-height: 160px;
+    background: #364d79;
+    overflow: hidden;
+  }
+
+  .ant-carousel >>> .slick-slide h3 {
+    color: #fff;
+  }
+</style>
+```
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
deleted file mode 100644
index 6d866c700..000000000
--- a/components/carousel/demo/vertical.md
+++ /dev/null
@@ -1,37 +0,0 @@
-<cn>
-#### 垂直
-垂直显示。
-</cn>
-
-<us>
-#### Vertical
-Vertical pagination.
-</us>
-
-```tpl
-<template>
-  <a-carousel vertical>
-    <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 >>> .slick-slide h3 {
-    color: #fff;
-  }
-</style>
-```
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 2495904f2..ec54998ca 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -1,22 +1,18 @@
 ## API
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| afterChange | Callback function called after the current index changes | function(current) | - |
-| autoplay | Whether to scroll automatically | boolean | `false` |
-| beforeChange | Callback function called before the current index changes | function(from, to) | - |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
-| dotsClass | Class name of the dots | string | `slick-dots` |
-| easing | Transition interpolation function name | string | `linear` |
-| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
-| vertical | Whether to use a vertical display | boolean | `false` |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| afterChange | Callback function called after the current index changes | function(current) | - |  |
+| autoplay | Whether to scroll automatically | boolean | `false` |  |
+| beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
+| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |  |
+| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
+| dotsClass | Class name of the dots | string | `slick-dots` |  |
+| easing | Transition interpolation function name | string | `linear` |  |
+| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
 
 ## Methods
 
-| Name | Description |
-| --- | --- |
-| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
-| next() | Change current slide to next slide |
-| prev() | Change current slide to previous slide |
+| Name | Description | Version | | --- | --- | --- | Version | | goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation | | | next() | Change current slide to next slide | | | prev() | Change current slide to previous slide | |
 
 For more info on the parameters, refer to the [vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx
index 3a8c003e8..60b42f87e 100644
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@@ -1,6 +1,6 @@
 import PropTypes from '../_util/vue-types';
 import debounce from 'lodash/debounce';
-import {
+import hasProp, {
   initDefaultProps,
   getComponentFromProp,
   filterEmpty,
@@ -8,6 +8,7 @@ import {
 } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
+import warning from '../_util/warning';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -20,7 +21,8 @@ if (typeof window !== 'undefined') {
       removeListener() {},
     };
   };
-  window.matchMedia = window.matchMedia || matchMediaPolyfill;
+  // ref: https://github.com/ant-design/ant-design/issues/18774
+  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
 }
 // Use require over import (will be lifted up)
 // make sure matchMedia polyfill run before require('vc-slick')
@@ -71,6 +73,7 @@ export const CarouselProps = {
   useCSS: PropTypes.bool,
   slickGoTo: PropTypes.number,
   responsive: PropTypes.array,
+  dotPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 };
 
 const Carousel = {
@@ -91,6 +94,13 @@ const Carousel = {
   },
 
   mounted() {
+    if (hasProp(this, 'vertical')) {
+      warning(
+        !this.vertical,
+        'Carousel',
+        '`vertical` is deprecated, please use `dotPosition` instead.',
+      );
+    }
     const { autoplay } = this;
     if (autoplay) {
       window.addEventListener('resize', this.onWindowResized);
@@ -98,7 +108,6 @@ const Carousel = {
     // https://github.com/ant-design/ant-design/issues/7191
     this.innerSlider = this.$refs.slick && this.$refs.slick.innerSlider;
   },
-
   beforeDestroy() {
     const { autoplay } = this;
     if (autoplay) {
@@ -107,6 +116,15 @@ const Carousel = {
     }
   },
   methods: {
+    getDotPosition() {
+      if (this.dotPosition) {
+        return this.dotPosition;
+      }
+      if (hasProp(this, 'vertical')) {
+        return this.vertical ? 'right' : 'bottom';
+      }
+      return 'bottom';
+    },
     onWindowResized() {
       // Fix https://github.com/ant-design/ant-design/issues/2550
       const { autoplay } = this;
@@ -134,9 +152,7 @@ const Carousel = {
   },
 
   render() {
-    const props = {
-      ...this.$props,
-    };
+    const props = { ...this.$props };
     const { $slots } = this;
 
     if (props.effect === 'fade') {
@@ -145,7 +161,10 @@ const Carousel = {
 
     const getPrefixCls = this.configProvider.getPrefixCls;
     let className = getPrefixCls('carousel', props.prefixCls);
-
+    const dotsClass = 'slick-dots';
+    const dotPosition = this.getDotPosition();
+    props.vertical = dotPosition === 'left' || dotPosition === 'right';
+    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'} ${props.dotsClass}`;
     if (props.vertical) {
       className = `${className} ${className}-vertical`;
     }
@@ -158,11 +177,11 @@ const Carousel = {
       on: getListeners(this),
       scopedSlots: this.$scopedSlots,
     };
-
+    const children = filterEmpty($slots.default);
     return (
       <div class={className}>
         <SlickCarousel ref="slick" {...SlickCarouselProps}>
-          {filterEmpty($slots.default)}
+          {children}
         </SlickCarousel>
       </div>
     );
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index af34cb73b..add985487 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -1,22 +1,22 @@
 ## API
 
-| 参数         | 说明                             | 类型               | 默认值       |
-| ------------ | -------------------------------- | ------------------ | ------------ |
-| afterChange  | 切换面板的回调                   | function(current)  | 无           |
-| autoplay     | 是否自动切换                     | boolean            | false        |
-| beforeChange | 切换面板的回调                   | function(from, to) | 无           |
-| dots         | 是否显示面板指示点               | boolean            | true         |
-| dotsClass    | 面板指示点类名                   | string             | `slick-dots` |
-| easing       | 动画效果                         | string             | linear       |
-| effect       | 动画效果函数，可取 scrollx, fade | string             | scrollx      |
-| vertical     | 垂直显示                         | boolean            | false        |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| afterChange | 切换面板的回调 | function(current) | 无 |  |
+| autoplay | 是否自动切换 | boolean | false |  |
+| beforeChange | 切换面板的回调 | function(from, to) | 无 |  |
+| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 1.5.0 |
+| dots | 是否显示面板指示点 | boolean | true |  |
+| dotsClass | 面板指示点类名 | string | `slick-dots` |  |
+| easing | 动画效果 | string | linear |  |
+| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |  |
 
 ## 方法
 
-| 名称                           | 描述                                              |
-| ------------------------------ | ------------------------------------------------- |
-| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
-| next()                         | 切换到下一面板                                    |
-| prev()                         | 切换到上一面板                                    |
+| 名称                           | 描述                                              | 版本 |
+| ------------------------------ | ------------------------------------------------- | ---- |
+| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |      |
+| next()                         | 切换到下一面板                                    |      |
+| prev()                         | 切换到上一面板                                    |      |
 
 更多参数可参考：[vc-slick props](https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-slick/src/default-props.js#L3)
diff --git a/types/carousel.d.ts b/types/carousel.d.ts
index 3b37e8307..a79b90d7e 100644
--- a/types/carousel.d.ts
+++ b/types/carousel.d.ts
@@ -4,6 +4,7 @@
 
 import { AntdComponent } from './component';
 
+export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
 export interface Settings {
   accessibility?: boolean;
   adaptiveHeight?: boolean;
@@ -12,7 +13,6 @@ export interface Settings {
   autoplay?: boolean;
   centerMode?: boolean;
   centerPadding?: string;
-  className?: string;
   cssEase?: string;
   dotsClass?: string;
   dots?: boolean;
@@ -44,12 +44,13 @@ export interface Settings {
   vertical?: boolean;
   verticalSwiping?: boolean;
   waitForAnimate?: boolean;
+  dotPosition?: DotPosition;
 }
 export interface ResponsiveObject {
   breakpoint: number;
   settings: 'unslick' | Settings;
 }
-export declare class Carousel extends AntdComponent {
+export declare class Carousel extends Settings, AntdComponent {
   /**
    * Callback function called after the current index changes
    * @type Function