diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 58093d3514..8927384cc3 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -126,4 +126,18 @@ describe('Carousel', () => {
).toBeTruthy();
});
});
+
+ describe('dots precise control by plain object', () => {
+ it('use dots to provide dotsClasse', () => {
+ const wrapper = mount(
+
+ 1
+ 2
+ 3
+ ,
+ );
+ wrapper.update();
+ expect(wrapper.find('.slick-dots').hasClass('customDots')).toBeTruthy();
+ });
+ });
});
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 217b33042c..ebb4196787 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -20,7 +20,7 @@ A carousel component. Scales with its container.
| autoplay | Whether to scroll automatically | boolean | `false` | |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
+| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | `true` | |
| easing | Transition interpolation function name | string | `linear` | |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 9196dc8b56..55ed78ab37 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import isPlainObject from 'lodash/isPlainObject';
import debounce from 'lodash/debounce';
import { Settings } from '@ant-design/react-slick';
import classNames from 'classnames';
@@ -14,13 +15,18 @@ export type CarouselEffect = 'scrollx' | 'fade';
export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
// Carousel
-export interface CarouselProps extends Settings {
+export interface CarouselProps extends Omit {
effect?: CarouselEffect;
style?: React.CSSProperties;
prefixCls?: string;
slickGoTo?: number;
dotPosition?: DotPosition;
children?: React.ReactNode;
+ dots?:
+ | boolean
+ | {
+ className?: string;
+ };
}
export default class Carousel extends React.Component {
@@ -106,7 +112,13 @@ export default class Carousel extends React.Component {
const dotsClass = 'slick-dots';
const dotPosition = this.getDotPosition();
props.vertical = dotPosition === 'left' || dotPosition === 'right';
- props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
+
+ const enableDots = props.dots === true || isPlainObject(props.dots);
+ const dsClass = classNames(
+ dotsClass,
+ `${dotsClass}-${dotPosition || 'bottom'}`,
+ typeof props.dots === 'boolean' ? false : props.dots?.className,
+ );
const className = classNames(prefixCls, {
[`${prefixCls}-rtl`]: direction === 'rtl',
@@ -115,7 +127,7 @@ export default class Carousel extends React.Component {
return (
-
+
);
};
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 41fadcc516..b4e8c5cee1 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -21,7 +21,7 @@ subtitle: 走马灯
| autoplay | 是否自动切换 | boolean | false | | |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | |
| dotPosition | 面板指示点位置,可选 `top` `bottom` `left` `right` | string | bottom | |
-| dots | 是否显示面板指示点 | boolean | true | | |
+| dots | 是否显示面板指示点,如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true | | |
| easing | 动画效果 | string | linear | | |
| effect | 动画效果函数,可取 scrollx, fade | string | scrollx | | |