Carousel

Slide carousel with autoplay, loop, adaptive height, pill dots and an imperative ref.

import { Carousel } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Display

Basic

Loading preview

APIs

Carousel properties

adaptiveHeight: boolean
Defaults to false.
arrows: boolean
Defaults to false.
autoplay: number | false | true
Defaults to false.
children: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
defaultIndex: number
Defaults to 0.
dots: boolean
Defaults to true.
index: number
loop: boolean
Defaults to true.
onIndexChange: (index: number) => void
pauseOnHover: boolean
Defaults to true.
ref: null | (instance: CarouselRef | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<CarouselRef | null>

Also accepts all native HTML and ARIA attributes.

Each child is a slide. autoplay takes true (5s) or an interval in ms and pauses while hovered unless pauseOnHover={false}. adaptiveHeight animates the viewport to the active slide's height. The ref exposes goTo(index), next() and prev(). Touch swipes change slides; inactive slides are inert.

Migrating from antd Carousel

beforeChange / afterChange → onIndexChange(index); controlled index is supported.
autoplaySpeed → autoplay={ms}; dots={false} and ref.goTo keep working.
effect="fade", vertical, dotPosition, draggable and other slick settings are not supported.