Card Carousel

Galleries 1

About

Seamless Images carousel animation. Mountain Range Card Carousel

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card Carousel to your project and fits it to your theme.

Code

How Card Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CardCarousel } from "@/components/ui/card-carousel";

export default function DemoOne() {
const images = [
  {
    src: "https://cdn.21st.dev/assets/mirror/31/31ee902b46038d690f949a8be82c4b5673d554eac7456974c04950d78b4efe3d.jpg",
    alt: "Forest Path",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/97/97103cb7b8ac5adbbd3e64c7410560b04a83b056daa580ee1b0353f774ec8d3d.jpg",
    alt: "Beach Sunset",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/76/76cecb6624f02b61d534584ac8f5c5556403e097968b556ebb981db12ef81a11.jpg",
    alt: "Mountain Range",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/e4/e49949507975915e87a6ca9f937fbf18e8b210f9fc77674bfd927e4026597995.jpg",
    alt: "City at Night",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/9f/9f4d6686c3ee21321e110920cfd3b8109d15f61ab2972dfafdeb1f1b1099c568.jpg",
    alt: "Desert Dunes",
  },
];




  return <div className="pt-40">
      <CardCarousel
        images={images}
        autoplayDelay={2000}
        showPagination={true}
        showNavigation={true}
      />
    </div>;
}