You're viewing the
dependabot/github_actions/pnpm/action-setup-6 deployment.Carousel
Slides shown one or a few at a time, scrolled by dragging or with arrows
Summary
Slides shown one (or a few) at a time: drag them, or click an arrow, then use the left and right arrow keys.
Same API as shadcn Carousel, built on Embla (opts takes Embla's options).
Usage
<Carousel>
<CarouselContent>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">1</div>
</CarouselItem>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">2</div>
</CarouselItem>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">3</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
result:
1
2
3
The arrows sit inside the article's width, in a gutter: on each side, or above and below a vertical carousel.
Two at a time
<Carousel opts={{ align: "start" }}>
<CarouselContent>
<CarouselItem className="basis-1/2">
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">1</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">2</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">3</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">4</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
result:
1
2
3
4
Vertical
The strip needs a height:
<Carousel orientation="vertical">
<CarouselContent className="h-80">
<CarouselItem className="basis-1/2">
<div className="flex h-full items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">1</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex h-full items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">2</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex h-full items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">3</div>
</CarouselItem>
<CarouselItem className="basis-1/2">
<div className="flex h-full items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">4</div>
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
result:
1
2
3
4
Without arrows
Drag only, and loop so there is always a next slide. No arrows, no gutter.
<Carousel opts={{ loop: true }}>
<CarouselContent>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">1</div>
</CarouselItem>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">2</div>
</CarouselItem>
<CarouselItem>
<div className="flex aspect-video items-center justify-center rounded-2xl bg-surface-container text-3xl font-bold">3</div>
</CarouselItem>
</CarouselContent>
</Carousel>
result:
1
2
3
Images
<Carousel opts={{ loop: true }}>
<CarouselContent>
<CarouselItem>
<Img src="gutenberg.jpg" alt="Gutenberg" />
</CarouselItem>
<CarouselItem>
<Img src="gutenberg.jpg" alt="Gutenberg" />
</CarouselItem>
<CarouselItem>
<Img src="gutenberg.jpg" alt="Gutenberg" />
</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
result:
In the markdown export of a page, the slides follow one another, without the arrows.