104Get started
HextaUI

Carousel: Rewind and start index

rewind sends Next on the last slide back to the first. defaultIndex opens on a slide without a scroll animation.

1
2
3
4
5
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselRewind() {
  return (
    <div className="w-full max-w-xs px-12">
      <Carousel rewind defaultIndex={2} aria-label="Rewind">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Add this example

This adds the example as components/examples/carousel/rewind.tsx, together with the Carousel component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel-rewind.json

To add only the component, follow the Carousel installation.

Props in this example

The Carousel props this example sets, from the API reference.

Carousel

PropTypeDefault
defaultIndex
number0
rewindWrap from the last slide back to the first.
booleanfalse

Every prop is in the Carousel API reference.

More Carousel examples

See them all, with keyboard support and accessibility notes, on the Carousel page.

Related components