Carousel

A carousel shows one slide of a set at a time and keeps the others out of view. Users move through the set by dragging the slides, with the previous and next buttons, or with the left and right arrow keys while focus is inside the carousel. On the first and the last slide, the button that leads no further is disabled.

PreviewCode

Previous slideNext slide

UsageCopy Anchor Link

import {
	Carousel,
	CarouselContent,
	CarouselItem,
	CarouselNext,
	CarouselPrevious,
} from "@biem/ui/components/ui/carousel";
import { generateGradient } from "@biem/ui/lib/generate-gradient";

const photos = [1, 2, 3].map((aisle) => ({
	alt: `Shelf photo aisle ${aisle}`,
	src: generateGradient(`Shelf photo aisle ${aisle}`),
}));

export function CarouselDefault() {
	return (
		<div className="w-full max-w-sm px-12">
			<Carousel>
				<CarouselContent>
					{photos.map((photo) => (
						<CarouselItem key={photo.alt}>
							<img src={photo.src} alt={photo.alt} className="aspect-video w-full rounded-lg object-cover"/>
						</CarouselItem>
					))}
				</CarouselContent>
				<CarouselPrevious/>
				<CarouselNext/>
			</Carousel>
		</div>
	);
}

ExamplesCopy Anchor Link

LoopCopy Anchor Link

Some sets have no natural first or last slide, such as the promotions running in a store this week. With loop set to true in opts, the carousel continues from the last slide to the first and back again, so users keep browsing in either direction and the buttons no longer stop at either end.

PreviewCode

Previous slideNext slide

With Slide CounterCopy Anchor Link

While users move through a set one slide at a time, they easily lose track of how far they have come and how much remains. Through setApi the application gains access to the carousel, so it can show the position of the current slide and update it with every move, whether users drag, press a button or use the arrow keys.

PreviewCode

Previous slideNext slide

Photo 1 of 3

API ReferenceCopy Anchor Link

CarouselCopy Anchor Link

CarouselContentCopy Anchor Link

CarouselContent holds the slides and clips the ones that are out of view. It renders a div inside a clipping div, passes native attributes to the inner one, and has no props of its own.

CarouselItemCopy Anchor Link

CarouselItem holds one slide. It renders a div that assistive technology announces as a slide, and it has no props of its own.

CarouselPreviousCopy Anchor Link

CarouselNextCopy Anchor Link