Image Carousel
The marketing homepage hero carousel — a cross-fading photo deck with a title, caption and prev/next arrows.
Tabitha’s Way Food Bank
Every dollar raised provides groceries for 5 individuals.
Installation
pnpm dlx shadcn@latest add @ffg/image-carouselUsage
"use client"
import Image from "next/image";
import { ImageCarousel } from "@/components/ui/image-carousel";
import { NoteTerm } from "@/components/ui/marketing-tooltip";
<ImageCarousel
imageComponent={(props) => <Image {...props} fill sizes="(min-width: 1024px) 588px, 100vw" />}
slides={[
{
src: "/assets/home/hero-1.jpg",
alt: "A volunteer restocks the refrigerated shelves at a food pantry.",
title: "Tabitha’s Way Food Bank",
caption: <>Every dollar raised provides groceries for <NoteTerm tip="Enough groceries to feed five people for a week.">5 individuals</NoteTerm>.</>,
},
]}
/>The front photo fades off in place to reveal the next one beneath it, so nothing moves or resizes beside the headline.
- slides —
srcis optional; without it the frame shows the muted fill - imageComponent — defaults to
img; passnext/image(withfill) or your own - Auto-advances every 5s; pauses on hover and focus, and stays put under reduced motion
- Caption is a live region, so screen readers hear each change