1. framework components
  2. ›
  3. carousel

Carousel

Navigate through a collection of slides with controls and indicators.

Breaking convention in Skeleton, some portions of this component are provided “headless”. Meaning no default styles are applied out of the box. This ensures you retain full control of styling for maximum flexibility.

Overlapping Controls

Introduce supporting elements and styles to implement this variation.

Orientation

Apply orientation="vertical" on the root, and apply a set height on the <Carousel.ItemGroup> .

Text

Display a text display of the carousel state.

Showing 1 of 3

Anatomy

Here’s an overview of how the Carousel component is structured in code:

tsx 
import { Carousel } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Carousel>
			<Carousel.Control>
				<Carousel.PrevTrigger />
				<Carousel.AutoplayTrigger />
				<Carousel.NextTrigger />
			</Carousel.Control>
			<Carousel.ItemGroup>
				<Carousel.Item />
			</Carousel.ItemGroup>
			<Carousel.IndicatorGroup>
				<Carousel.Indicator />
			</Carousel.IndicatorGroup>
			<Carousel.ProgressText />
		</Carousel>
	);
}

API Reference

Root

Prop Default Type
ids — Partial<{ root: string; item: (index: number) => string; itemGroup: string; nextTrigger: string; prevTrigger: string; indicatorGroup: string; indicator: (index: number) => string; }> | undefined

The ids of the elements in the carousel. Useful for composition.
translations — IntlTranslations | undefined

The localized messages to use.
slidesPerPage 1 number | undefined

The number of slides to show at a time.
autoSize false boolean | undefined

Whether to enable variable width slides.
slidesPerMove "auto" number | "auto" | undefined

The number of slides to scroll at a time. When set to `auto`, the number of slides to scroll is determined by the `slidesPerPage` property.
autoplay false boolean | { delay: number; } | undefined

Whether to scroll automatically. The default delay is 4000ms.
allowMouseDrag false boolean | undefined

Whether to allow scrolling via dragging with mouse
loop false boolean | undefined

Whether the carousel should loop around.
page — number | undefined

The controlled page of the carousel.
defaultPage 0 number | undefined

The initial page to scroll to when rendered. Use when you don't need to control the page of the carousel.
spacing "0px" string | undefined

The amount of space between items.
padding — string | undefined

Defines the extra space added around the scrollable area, enabling nearby items to remain partially in view.
onPageChange — ((details: PageChangeDetails) => void) | undefined

Function called when the page changes.
inViewThreshold 0.6 number | number[] | undefined

The threshold for determining if an item is in view.
snapType "mandatory" "proximity" | "mandatory" | undefined

The snap type of the item.
slideCount — number

The total number of slides. Useful for SSR to render the initial ating the snap points.
onDragStatusChange — ((details: DragStatusDetails) => void) | undefined

Function called when the drag status changes.
onAutoplayStatusChange — ((details: AutoplayStatusDetails) => void) | undefined

Function called when the autoplay status changes.
dir "ltr" "ltr" | "rtl" | undefined

The document's text/writing direction.
getRootNode — (() => ShadowRoot | Node | Document) | undefined

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
orientation "horizontal" "horizontal" | "vertical" | undefined

The orientation of the element.
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Provider

Prop Default Type
value — CarouselApi<PropTypes>

element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Context

Prop Default Type
children — (carousel: CarouselApi<PropTypes>) => ReactNode

Control

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

ItemGroup

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Item

Prop Default Type
index — number

The index of the item.
snapAlign "start" "start" | "end" | "center" | undefined

The snap alignment of the item.
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

PrevTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

NextTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

AutoplayTrigger

Prop Default Type
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

IndicatorGroup

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself

Indicator

Prop Default Type
index — number

The index of the indicator.
readOnly false boolean | undefined

Whether the indicator is read only.
element — ((attributes: HTMLAttributes<"button">) => Element) | undefined

Render the element yourself

ProgressText

Prop Default Type
element — ((attributes: HTMLAttributes<"div">) => Element) | undefined

Render the element yourself
View page on GitHub