Carousel

Galleries 14

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,
  CarouselPrev,
  CarouselNext,
  CarouselPagination,
} from "@/components/ui/carousel";
import { Button } from "@appica/ui-react/button";
import { ChevronLeft, ChevronRight } from "@appica/icons-react";

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

export default function CarouselDefault() {
  return (
    <div className="w-full max-w-xl pb-8">
      <Carousel loop>
        <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>
        <CarouselPrev
          render={
            <Button variant="outline" size="icon-md" className="rounded-full">
              <ChevronLeft />
            </Button>
          }
        />
        <CarouselNext
          render={
            <Button variant="outline" size="icon-md" className="rounded-full">
              <ChevronRight />
            </Button>
          }
        />
        <CarouselPagination className="absolute inset-x-0 top-full mt-5 justify-center" />
      </Carousel>
    </div>
  );
}