Carousel

Galleries 3

About

A draggable, swipeable image/content slider with arrows, dot pagination, thumbnails, autoplay, fade, and auto-height, for showcasing photo galleries or product shots one slide at a time.

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,
  CarouselContent,
  CarouselSlide,
  CarouselThumb,
  CarouselThumbs,
} from "@/components/ui/carousel";

const SLIDES = [1, 2, 3, 4, 5, 6, 7];

export default function CarouselThumbnails() {
  return (
    <Carousel loop className="flex w-full max-w-142 flex-col gap-3">
      <CarouselContent>
        {SLIDES.map((n) => (
          <CarouselSlide key={n}>
            <img
              src={`https://appica.dev/carousel/slide-${n}.jpg`}
              alt={`Slide ${n}`}
              className="aspect-3/2 w-full rounded-xl object-cover"
            />
          </CarouselSlide>
        ))}
      </CarouselContent>

      <CarouselThumbs>
        {SLIDES.map((n) => (
          <CarouselThumb key={n} className="w-16 sm:w-22">
            <img
              src={`https://appica.dev/carousel/slide-${n}.jpg`}
              alt=""
              className="size-full object-cover"
            />
          </CarouselThumb>
        ))}
      </CarouselThumbs>
    </Carousel>
  );
}