Ant Design

⌘ K

5.21.3

Carousel

A set of carousel areas.

가져오기import{ Carousel }from"antd";

문서

⌘ K

5.21.3

A set of carousel areas.

가져오기import{ Carousel }from"antd";

문서

When there is a group of content on the same level.
When there is insufficient content space, it can be used to save space in the form of a revolving door.
Commonly used for a group of pictures/cards.

Common props ref：Common props

Property	Description	Type	Default	Version
arrows	Whether to show switch arrows	boolean	false	5.17.0
autoplay	Whether to scroll automatically	boolean	false
autoplaySpeed	Delay between each auto scroll (in milliseconds)	number	3000
adaptiveHeight	Adjust the slide's height automatically	boolean	false
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, `object` for `dotsClass`	boolean \| { className?: string }	true
draggable	Enable scrollable via dragging on desktop	boolean	false
fade	Whether to use fade transition	boolean	false
infinite	Infinitely wrap around contents	boolean	true
speed	Animation speed in milliseconds	number	500
easing	Transition interpolation function name	string	`linear`
effect	Transition effect	`scrollx` \| `fade`	`scrollx`
afterChange	Callback function called after the current index changes	(current: number) => void	-
beforeChange	Callback function called before the current index changes	(current: number, next: number) => void	-
waitForAnimate	Whether to wait for the animation when switching	boolean	false

Find more APIs in react-slick documentation.

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

토큰 이름	설명	타입	기본값
arrowOffset	切换箭头边距	number	8
arrowSize	切换箭头大小	number	16
dotActiveWidth	激活态指示点宽度	string \| number	24
dotGap	指示点之间的间距	number	4
dotHeight	指示点高度	string \| number	3
dotOffset	指示点距离边缘的距离	number	12
dotWidth	指示点宽度	string \| number	16

When there is a group of content on the same level.
When there is insufficient content space, it can be used to save space in the form of a revolving door.
Commonly used for a group of pictures/cards.

Common props ref：Common props

Property	Description	Type	Default	Version
arrows	Whether to show switch arrows	boolean	false	5.17.0
autoplay	Whether to scroll automatically	boolean	false
autoplaySpeed	Delay between each auto scroll (in milliseconds)	number	3000
adaptiveHeight	Adjust the slide's height automatically	boolean	false
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, `object` for `dotsClass`	boolean \| { className?: string }	true
draggable	Enable scrollable via dragging on desktop	boolean	false
fade	Whether to use fade transition	boolean	false
infinite	Infinitely wrap around contents	boolean	true
speed	Animation speed in milliseconds	number	500
easing	Transition interpolation function name	string	`linear`
effect	Transition effect	`scrollx` \| `fade`	`scrollx`
afterChange	Callback function called after the current index changes	(current: number) => void	-
beforeChange	Callback function called before the current index changes	(current: number, next: number) => void	-
waitForAnimate	Whether to wait for the animation when switching	boolean	false

Find more APIs in react-slick documentation.

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

토큰 이름	설명	타입	기본값
arrowOffset	切换箭头边距	number	8
arrowSize	切换箭头大小	number	16
dotActiveWidth	激活态指示点宽度	string \| number	24
dotGap	指示点之间的间距	number	4
dotHeight	指示点高度	string \| number	3
dotOffset	指示点距离边缘的距离	number	12
dotWidth	指示点宽度	string \| number	16