Carousel

Display a set of elements in a carousel

Import

import { Carousel } from 'rsuite';

// or
import Carousel from 'rsuite/Carousel';

Examples

Default

Controlled index

Appearance

Autoplay

Props

Property Type (Default) Description
activeIndex number Controls the current visible slide
as ElementType ('div') Custom element type
autoplay boolean Automatic carousel element.
autoplayInterval number (4000) Delay in ms until navigating to the next item.
children ReactNode Carousel elements
classPrefix string ('carousel') Component CSS class prefix
defaultActiveIndex number (0) The default initial slide
onSelect (index: number, event?: React.ChangeEvent) => void Callback fired when the active item changes
onSlideEnd (index: number, event?: React.TransitionEvent) => void Callback fired when a slide transition ends
onSlideStart (index: number, event?: React.ChangeEvent) => void Callback fired when a slide transition starts
placement enum:'top','bottom','left','right' ('bottom') Button placement
shape enum:'dot','bar' ('dot') Button shape