Featured Work Carousel
A full-width, accessible carousel that showcases featured work — one slide per item with a lazy-loaded hero image, year/company overlays, title/role/description and a "View case study" link.
FeaturedWorkCarousel presents one work item per slide with a lazy-loaded hero image, year/company overlays, and a call-to-action link. It includes dot navigation, a slide counter, hover/focus autoplay pausing and a circular play/pause + progress control, and it respects prefers-reduced-motion (autoplay starts paused). The case-study link is built by getCaseStudyHref, so it adapts to your routing.
Installation
npx shadcn@latest add @adv/featured-work-carouselUsage
import FeaturedWorkCarousel from '@/components/featuredWorkCarousel/FeaturedWorkCarousel';
<FeaturedWorkCarousel
items={featuredWork}
getCaseStudyHref={(item) => `/work/${item.company.toLowerCase()}/case/${item.id}`}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | WorkItem[] | — | Slides: { id, title, role, period, company, logo?, description, image?, link? }. |
getCaseStudyHref | (item: WorkItem) => string | /work/{company}/case/{id} | Builds the "View case study" link for each item. |
className | string | — | Additional CSS classes on the outer section. |