Carousel

Galleries 183

About

Carousel with auto animation

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

Code

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

Usage.tsx

import { Carousel } from "@/components/ui/carousel";
import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function DemoOne() {
  return (
    <div className="">
      <Carousel
        slides={[
          <div
            key={"4"}
            className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
          >
            <div className="w-full h-full overflow-hidden"> 
              <img
                src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/templates/ai-icons.jpg" 
                className="object-cover h-full w-full"
              /> 
            </div>
          </div>,
          <div
            key={"1"}
            className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
          >
            <div className="w-full h-full overflow-hidden"> 
              <img
                src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/social-media-posts.jpg" 
                className="object-cover h-full w-full"
              /> 
            </div>
          </div>,
          <div
            key={"2"}
            className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
          >
            <div className="w-full h-full overflow-hidden"> 
              <img
                src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/dalim.jpg" 
                className="object-cover h-full w-full"
              /> 
            </div>
          </div>,
          <div
            key={"3"}
            className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
          >
            <div className="w-full h-full overflow-hidden"> 
              <img
                src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/works/website-designs.jpg" 
                className="object-cover h-full w-full"
              /> 
            </div>
          </div>, 
          <div
            key={"5"}
            className="border h-full w-full relative overflow-hidden rounded-md bg-card text-card-foreground"
          >
            <div className="w-full h-full overflow-hidden"> 
              <img
                src="https://raw.githubusercontent.com/aliimam-in/aliimam/refs/heads/main/apps/www/public/templates/ai-logos.jpg" 
                className="object-cover h-full w-full"
              /> 
            </div>
          </div>,
        ]}
      />
      <Link className="flex justify-center mt-10" href="https://aliimam.in/works">
        <Button className="h-14 cursor-pointer rounded-full px-10">
          See All Works
        </Button>
      </Link>
    </div>
  );
}