Carousel

Enables cycling through a sequence of visual content within a container.

Usage

Use Carousel to cycle through a set of slides.

import { Carousel } from "@elemnts-ui/react";

<Carousel slideCount={3}>
  <Carousel.ItemGroup>
    <Carousel.Item index={0}>Item 1</Carousel.Item>
    <Carousel.Item index={1}>Item 2</Carousel.Item>
    <Carousel.Item index={2}>Item 3</Carousel.Item>
  </Carousel.ItemGroup>
  <Carousel.Control>
    <Carousel.AutoplayTrigger>
      <Carousel.AutoplayIndicator fallback="Play">
        Pause
      </Carousel.AutoplayIndicator>
    </Carousel.AutoplayTrigger>
    <Carousel.PrevTrigger>Prev</Carousel.PrevTrigger>
    <Carousel.IndicatorGroup>
      {[0, 1, 2].map((i) => (
        <Carousel.Indicator key={i} index={i} />
      ))}
    </Carousel.IndicatorGroup>
    <Carousel.NextTrigger>Next</Carousel.NextTrigger>
    <Carousel.ProgressText />
  </Carousel.Control>
</Carousel>;

Spacing

Set the space between slides using the spacing prop.

Autoplay

Enable automatic slide advancement by setting the autoplay prop on the Carousel component.

Vertical

Set the orientation prop to 'vertical' to render a vertical carousel.

Thumbnail

To replace default indicator dots with image thumbnails, render each thumbnail inside CarouselIndicator to provide a visual preview of each slide:

API Reference

Carousel

The root component for the carousel.

Prop	Type	Default
value	`UseCarouselReturn`	-
slideCount	`number`	`-`
autoplay	`boolean`	`false`
allowMouseDrag	`boolean`	`false`
loop	`boolean`	`false`
orientation	`'horizontal'` \| `'vertical'`	`'horizontal'`
page	`number`	`0`
slidesPerPage	`number`	`1`
spacing	`number`	`16px`
padding	`number`	`0`

CarouselContent

Wrapper for all slides. Orchestrates the layout and transition.

Prop	Type	Default
asChild	`boolean`	`false`

CarouselItem

The individual slide item.

Prop	Type	Default
asChild	`boolean`	`false`
index	`number`	`-`
snapAlign	`'start'` \| `'center'` \| `'end'`	`'start'`

CarouselControl

Wrapper for the carousel control buttons.

Prop	Type	Default
asChild	`boolean`	`false`

CarouselPrevTrigger

Trigger for the previous slide.

Prop	Type	Default
asChild	`boolean`	`false`

CarouselNextTrigger

Trigger for the next slide.

Prop	Type	Default
asChild	`boolean`	`false`

CarouselIndicatorGroup

Wrapper for the carousel indicator group.

Prop	Type	Default
asChild	`boolean`	`false`

CarouselIndicator

The individual indicator item.

Prop	Type	Default
asChild	`boolean`	`false`
index	`number`	`-`
readOnly	`boolean`	`false`