Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Navigation

Carousel Controls Button Group for React

Carousel controls with previous and next buttons around five slide dots, and a row that shows the slide number.

Framework
UI library

The controls under an image carousel. Chevrons step back and forth and stop at the first and last slide; the round dots in between jump straight to a slide. The second row is the text version: Prev, the slide number out of five, and Next.

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 is the slide tracked?

A number from 1 to 5, starting at 1. Previous and next step by one, and each dot carries its slide number as its value, so pressing it jumps there.

When are previous and next disabled?

Previous on slide 1 and next on slide 5, in both rows. They get disabled from those checks.

How are the dots named?

Each dot has an aria-label, Slide 1 to Slide 5, and the current one sets aria-current. The dots are pill icon buttons with no content.

Does the 1 / 5 button do anything?

No. It shows the position and has no handler. Use ButtonGroupText if it shouldn't take focus.

Where are the slides?

The demo has none; it only keeps the number. The Carousel component has its own previous, next and indicator parts if you want a complete one.

How do I make it loop?

Wrap the number instead of clamping it: next on slide 5 goes to 1, and previous on 1 goes to 5. Then remove the disabled checks.

All 39 button group examples