Carousel - Namu Design

A carousel component. Scales with its container.

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

Basic usage.

Scroll automatically

Timing of scrolling to the next card/picture.

There are 4 position options available.

Slides use fade for transition.

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoplay	Whether to scroll 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` and any others	boolean \| { className?: string }	true
waitForAnimate	Whether to wait for the animation when switching	boolean	false
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	-

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

Find more APIs in react-slick documentation.

Design Token

Component Token

Global Token

FAQ

How to add custom arrows?