Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Standard Carousel for Ark UI

Five slides numbered 1 through 5, one in the frame at a time, with previous and next buttons beside the frame.

One wide frame shows a single number, from 1 through 5, one slide at a time. Previous and next sit beside the frame.

Start here for images or quotes that share one slot. A Scroll Area fits if people should skim them in a strip. Ark UI in React does not advance the slides on a timer.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Carousel anatomy: content, item, previous, next, indicator group

Usage

<div className="mx-auto w-full max-w-xl">
  <Carousel slideCount={slides.length}>
    <CarouselContent>
      {slides.map((slide, index) => (
        <CarouselItem index={index} key={slide}>
          <div className="flex aspect-video w-full items-center justify-center rounded-md border bg-background">
            <span className="font-semibold text-4xl">{slide}</span>
          </div>
        </CarouselItem>
      ))}
    </CarouselContent>
    <CarouselControl>
      <CarouselPrevious />
      <CarouselNext />
    </CarouselControl>
  </Carousel>
</div>

FAQ

What is on each slide?

Five slides, one CarouselItem each. Each holds a div with aspect-video, w-full, rounded-md border and bg-background, and the slide number in font-semibold text-4xl. The wrapper is mx-auto w-full max-w-xl.

Why does one slide fill the frame?

One slide per page is the default. slidesPerPage defaults to 1, and spacing on Carousel defaults to 16px.

Where are previous and next?

Beside the frame, outside it. Their names are Previous slide and Next slide, and each one is disabled when there is no slide further that way.

How do I show more than one slide?

Set slidesPerPage, such as 3. spacing sets the gap between slides.

How do I go back to the first slide after the last?

Add loop.Next on the last slide then shows the first, and neither button is ever disabled.

What does the markup need?

slideCount on Carousel, an index on each CarouselItem, and CarouselPrevious and CarouselNext inside CarouselControl.

API Reference

Sets slideCount={slides.length} and index={index}. The rest is on the Carousel page.

All 4 carousel examples