A swipeable, keyboard-accessible slideshow built on native CSS scroll-snap, with previous/next buttons, dot indicators, and an optional coverflow effect.
"use client";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
useCarousel,
} from "@/components/ui/carousel";
import {
AnchorIcon,
ShipIcon,
SunIcon,
CompassIcon,
WavesIcon,
} from "lucide-react";
const ports = [
{ icon: AnchorIcon, name: "Tortuga", caption: "Safe harbour, loose tongues" },
{ icon: ShipIcon, name: "Nassau", caption: "The republic of pirates" },
{
icon: SunIcon,
name: "Port Royal",
caption: "Richest town in the Caribbean",
},
{ icon: CompassIcon, name: "Havana", caption: "Treasure fleet anchorage" },
{ icon: WavesIcon, name: "Cartagena", caption: "Walls worth avoiding" },
];
function SlideCounter() {
const { index, count } = useCarousel();
return (
<p
aria-hidden="true"
className="font-mono text-xs text-muted-foreground tabular-nums"
>
{index + 1} / {count}
</p>
);
}
export default function CarouselDemo() {
return (
<div className="w-full max-w-xl p-6 md:p-10">
<Carousel aria-label="Ports of call">
<CarouselContent trackClassName="gap-4">
{ports.map((port) => (
<CarouselItem
key={port.name}
className="basis-4/5 sm:basis-1/2 lg:basis-1/3"
>
<div className="grid h-40 content-between rounded-lg border bg-card p-5 text-card-foreground">
<port.icon
aria-hidden="true"
className="size-5 text-muted-foreground"
/>
<div>
<p className="text-2xl font-semibold">{port.name}</p>
<p className="text-sm text-muted-foreground">
{port.caption}
</p>
</div>
</div>
</CarouselItem>
))}
</CarouselContent>
<div className="mt-4 flex items-center justify-between">
<CarouselPrevious />
<SlideCounter />
<CarouselNext />
</div>
</Carousel>
</div>
);
}