diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
index e7fb046b1e..68832455ea 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 ./antdv-demo/docs/carousel/demo/autoplay.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" 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 ./antdv-demo/docs/carousel/demo/basic.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" 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 ./antdv-demo/docs/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 slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" 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>
@@ -345,7 +345,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" 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>
@@ -357,15 +357,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
 
 exports[`renders ./antdv-demo/docs/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-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">
@@ -435,7 +427,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/position.md correctly 1`] = `
           </div>
         </div>
       </div>
-      <ul class="slick-dots slick-dots-top undefined" style="display: block;">
+      <ul class="slick-dots slick-dots-top" 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>
diff --git a/components/carousel/index.jsx b/components/carousel/index.jsx
index 60b42f87ef..f64274ef53 100644
--- a/components/carousel/index.jsx
+++ b/components/carousel/index.jsx
@@ -9,6 +9,7 @@ import hasProp, {
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 import warning from '../_util/warning';
+import classNames from 'classnames';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -164,7 +165,9 @@ const Carousel = {
     const dotsClass = 'slick-dots';
     const dotPosition = this.getDotPosition();
     props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'} ${props.dotsClass}`;
+    props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
+      [`${props.dotsClass}`]: !!props.dotsClass,
+    });
     if (props.vertical) {
       className = `${className} ${className}-vertical`;
     }