Carousel

Galleries 1

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

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

export default function CarouselMultiple() {
  return (
    <div className="w-full max-w-xl px-15">
      <Carousel align="start" slidesToScroll="auto" loop>
        <CarouselContent>
          {SLIDES.map((n) => (
            <CarouselSlide key={n} className="sm:basis-1/2 md:basis-1/3">
              <img
                src={`https://appica.dev/carousel/slide-${n}.jpg`}
                alt={`Slide ${n}`}
                className="aspect-square w-full rounded-xl object-cover"
              />
            </CarouselSlide>
          ))}
        </CarouselContent>
        <CarouselPrev
          position="outside"
          render={
            <Button variant="outline" size="icon-md" className="rounded-full">
              <ChevronLeft />
            </Button>
          }
        />
        <CarouselNext
          position="outside"
          render={
            <Button variant="outline" size="icon-md" className="rounded-full">
              <ChevronRight />
            </Button>
          }
        />
      </Carousel>
    </div>
  );
}