Skip to content
Premium & Brand

Carousel

Scroll-snap slide gallery with prev/next, dots and keyboard nav.

Import

tsx
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots } from "@cronus-ui/ui";
bash
npx cronus-ui add carousel

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard
default.cronus
app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CarouselDefault layout:inline style:carousel {
  aria-label:"Slides"
  label "Slides"
  text "One"
  text "Two"
}

page "/audit/carousel/default" type:custom {
  use CarouselDefault
}

API Reference

Generated from the component's exported types.

CarouselLabels

Skip CarouselLabels props table
PropTypeDefaultDescription
previous*
string——
next*
string——
goToSlide*
(index: number) => string——

CarouselProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll">

Skip CarouselProps props table
PropTypeDefaultDescription
opts
CarouselOptions—Tuning for snap alignment and looping.
children
ReactNode—Contents of the component.
labels
Partial<CarouselLabels>—Override default English strings.
className
string—Additional class names merged onto the root.
id
string—DOM id of the root element.

CarouselContentProps

Extends HTMLAttributes<HTMLDivElement>

Skip CarouselContentProps props table
PropTypeDefaultDescription
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.
id
string—DOM id of the root element.

CarouselItemProps

Extends HTMLAttributes<HTMLDivElement>

Skip CarouselItemProps props table
PropTypeDefaultDescription
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.
id
string—DOM id of the root element.

CarouselPreviousProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Skip CarouselPreviousProps props table
PropTypeDefaultDescription
type
string—Native type of the underlying element.
disabled
boolean—Disables pointer and keyboard interaction.
onClick
(event: MouseEvent) => void—Click handler.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

CarouselNextProps

Extends ButtonHTMLAttributes<HTMLButtonElement>

Skip CarouselNextProps props table
PropTypeDefaultDescription
type
string—Native type of the underlying element.
disabled
boolean—Disables pointer and keyboard interaction.
onClick
(event: MouseEvent) => void—Click handler.
children
ReactNode—Contents of the component.
className
string—Additional class names merged onto the root.

CarouselDotsProps

Extends HTMLAttributes<HTMLDivElement>

Skip CarouselDotsProps props table
PropTypeDefaultDescription
className
string—Additional class names merged onto the root.
children
ReactNode—Contents of the component.
id
string—DOM id of the root element.