Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel examples · Standard

Carousel with Thumbnails for React

A carousel with a row of numbered buttons that show the current slide and jump to any slide.

Framework
UI library

Ever scrolled through product photos and wanted to jump straight to the fourth one? This React carousel puts a row of numbered buttons under the slides. The button of the current slide is filled, and pressing any button shows its slide, whether you got there by swiping or by the buttons. Use it for product galleries, property listings or portfolios.

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

FAQ

How do the buttons stay in sync with the slides?

setApi stores the carousel's API. An effect listens to its select event and stores selectedScrollSnap() in current, and each button calls scrollTo with its index.

What does each slide show?

Five slides. Each is an aspect-2/1 box with rounded-md border bg-background and the slide number in font-semibold text-4xl. The carousel and the buttons stack in a max-w-md column with gap-4.

How are the buttons styled?

A flex justify-center gap-2 row of Buttons, one per slide. The current one is variant="default", the others variant="outline". Change those, or the size, to restyle them.

Can I show pictures instead of numbers?

Yes. Put a small img in each button, with a fixed size such as size-12 and object-cover, and keep the aria-label so each button still has a name.

What if there are too many buttons for the row?

Make the row scroll: overflow-x-auto instead of justify-center. For more than ten or so slides, a page counter (Slide 3 of 24) is easier to use than a long row of buttons.

What will a screen reader say?

Each button's aria-label reads Go to slide 1 through Go to slide 5, and the current one has aria-current, so it's announced as current. Previous and next are left out here: the buttons replace them.

All 4 carousel examples