Carousel

When To Use

• 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.

Examples

<!-- prettier-ignore -->

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/placement.tsx">Position</code> <code src="./demo/autoplay.tsx">Scroll automatically</code> <code src="./demo/fade.tsx">Fade in</code> <code src="./demo/arrows.tsx" version="5.17.0">Arrows for switching</code> <code src="./demo/dot-duration.tsx" version="5.24.0">Progress of dots</code> <code src="./demo/component-token.tsx" debug>Component Token</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version	Global Config
arrows	Whether to show switch arrows	boolean	false	5.17.0	×
autoplay	Whether to scroll automatically, you can specify autoplay={{ dotDuration: true }} to display the progress bar	boolean | { dotDuration?: boolean }	false	dotDuration: 5.24.0	×
autoplaySpeed	Delay between each auto scroll (in milliseconds)	number	3000		×
adaptiveHeight	Adjust the slide's height automatically	boolean	false		×
dotPlacement	The position of the dots, which can be one of top bottom start end	string	bottom		×
dotPosition	The position of the dots, which can be one of top bottom left right start end, Please use dotPlacement instead	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.

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

Design Token

<ComponentTokenTable component="Carousel"></ComponentTokenTable>

FAQ

How to add custom arrows? {#faq-add-custom-arrows}

See #12479.