Skip to content

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

Free

Standard Carousel for Svelte

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

UI library: Ark UI

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 Svelte does not advance the slides on a timer.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="mx-auto w-full max-w-xl"><Carousel slideCount={slides.length}><CarouselContent>{#each slides as slide, index (slide)}<CarouselItem index={index}><div class="flex aspect-video w-full items-center justify-center rounded-md border bg-background"><span class="font-semibold text-4xl">{slide}</span></div></CarouselItem>{/each}</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