Carousel

Galleries 2

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 { ChevronUp, ChevronDown } from "@appica/icons-react";

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

export default function CarouselVertical() {
  return (
    <div className="w-full">
      <Carousel
        orientation="vertical"
        loop
        className="flex w-full items-center justify-center gap-5"
      >
        <div className="relative w-full max-w-xl">
          <CarouselContent className="h-100">
            {SLIDES.map((n) => (
              <CarouselSlide key={n}>
                <img
                  src={`https://appica.dev/carousel/slide-${n}.jpg`}
                  alt={`Slide ${n}`}
                  className="size-full rounded-xl object-cover"
                />
              </CarouselSlide>
            ))}
          </CarouselContent>
          <CarouselPrev
            render={
              <Button variant="outline" size="icon-md" className="rounded-full">
                <ChevronUp />
              </Button>
            }
          />
          <CarouselNext
            render={
              <Button variant="outline" size="icon-md" className="rounded-full">
                <ChevronDown />
              </Button>
            }
          />
        </div>
        <CarouselPagination orientation="vertical" />
      </Carousel>
    </div>
  );
}