Carousel

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.

@delego

byappica-dev

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 = [
  { n: 1, title: "Sunlit summit", caption: "Aurora Range" },
  { n: 2, title: "Deer in bloom", caption: "Meadowvale Alps" },
  { n: 3, title: "Turquoise cove", caption: "Azure Isles" },
  { n: 4, title: "Rose plains", caption: "Crimson Flats" },
  { n: 5, title: "Mirror lake", caption: "Stillwater Valley" },
];

export default function CarouselLight() {
  return (
    <div className="w-full max-w-xl">
      <Carousel loop className="overflow-hidden rounded-xl">
        <CarouselContent>
          {SLIDES.map((slide) => (
            <CarouselSlide key={slide.n}>
              <div className="relative aspect-3/2 w-full">
                <img
                  src={`https://appica.dev/carousel/slide-${slide.n}.jpg`}
                  alt={slide.title}
                  className="size-full object-cover"
                />
                <div className="absolute inset-0 bg-linear-to-t from-black/70 via-black/10 to-transparent" />
                <div className="absolute inset-s-0 bottom-0 p-5">
                  <p className="text-lg font-semibold text-white">
                    {slide.title}
                  </p>
                  <p className="text-sm text-white/70">{slide.caption}</p>
                </div>
              </div>
            </CarouselSlide>
          ))}
        </CarouselContent>
        <CarouselPrev
          render={
            <Button variant="light" size="icon-md" className="rounded-full">
              <ChevronLeft />
            </Button>
          }
        />
        <CarouselNext
          render={
            <Button variant="light" size="icon-md" className="rounded-full">
              <ChevronRight />
            </Button>
          }
        />
        <CarouselPagination
          light
          className="absolute inset-x-0 bottom-5 justify-center"
        />
      </Carousel>
    </div>
  );
}