"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type CarouselFadeSlide = {
  id: string;
  src: string;
  alt: string;
  caption?: string;
};

export interface CarouselFadeProps extends React.HTMLAttributes<HTMLDivElement> {
  slides?: CarouselFadeSlide[];
  autoPlay?: boolean;
  interval?: number;
  showDots?: boolean;
}

const defaultSlides: CarouselFadeSlide[] = [
  {
    id: "1",
    src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80",
    alt: "Forest path with morning light",
    caption: "Morning trail through the forest",
  },
  {
    id: "2",
    src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80",
    alt: "Mountain ridge at sunrise",
    caption: "Ridge glow at first light",
  },
  {
    id: "3",
    src: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=1200&q=80",
    alt: "Lakeside cabin in the mist",
    caption: "Still waters by the cabin",
  },
  {
    id: "4",
    src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1200&q=80",
    alt: "Waterfall in a lush valley",
    caption: "Light through the falls",
  },
];

const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M15 18l-6-6 6-6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ChevronRightIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M9 6l6 6-6 6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export function CarouselFade({
  slides = defaultSlides,
  autoPlay = true,
  interval = 5000,
  showDots = true,
  className,
  ...props
}: CarouselFadeProps) {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [isPaused, setIsPaused] = React.useState(false);
  const slideCount = slides.length;

  const goNext = React.useCallback(() => {
    if (slideCount === 0) return;
    setActiveIndex((prev) => (prev + 1) % slideCount);
  }, [slideCount]);

  const goPrev = React.useCallback(() => {
    if (slideCount === 0) return;
    setActiveIndex((prev) => (prev - 1 + slideCount) % slideCount);
  }, [slideCount]);

  React.useEffect(() => {
    if (!autoPlay || isPaused || slideCount <= 1) return;

    const timer = window.setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % slideCount);
    }, interval);

    return () => window.clearInterval(timer);
  }, [autoPlay, interval, isPaused, slideCount]);

  React.useEffect(() => {
    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "ArrowRight") {
        goNext();
      }
      if (event.key === "ArrowLeft") {
        goPrev();
      }
    };

    window.addEventListener("keydown", handleKey);
    return () => window.removeEventListener("keydown", handleKey);
  }, [goNext, goPrev]);

  if (slideCount === 0) {
    return (
      <div
        className={cn(
          "rounded-xl border border-border bg-card px-6 py-10 text-center text-sm text-muted-foreground",
          className
        )}
        {...props}
      >
        No slides available.
      </div>
    );
  }

  return (
    <div className={cn("w-full", className)} {...props}>
      <div
        className="relative overflow-hidden rounded-2xl border border-border bg-card"
        onMouseEnter={() => setIsPaused(true)}
        onMouseLeave={() => setIsPaused(false)}
      >
        <div className="relative aspect-[16/9] w-full">
          {slides.map((slide, index) => (
            <div
              key={slide.id}
              className={cn(
                "absolute inset-0 transition-opacity duration-700 ease-in-out",
                index === activeIndex ? "opacity-100 z-10" : "opacity-0 z-0"
              )}
            >
              <img
                src={slide.src}
                alt={slide.alt}
                className="h-full w-full object-cover"
                loading={index === 0 ? "eager" : "lazy"}
              />
              {slide.caption ? (
                <div className="absolute inset-x-0 bottom-0 bg-background/80 px-5 py-4 backdrop-blur">
                  <p className="text-sm font-medium text-foreground">
                    {slide.caption}
                  </p>
                </div>
              ) : null}
            </div>
          ))}
        </div>

        <button
          type="button"
          onClick={goPrev}
          className="absolute left-3 top-1/2 z-20 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/90 text-foreground transition hover:bg-muted"
          aria-label="Previous slide"
        >
          <ChevronLeftIcon className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={goNext}
          className="absolute right-3 top-1/2 z-20 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/90 text-foreground transition hover:bg-muted"
          aria-label="Next slide"
        >
          <ChevronRightIcon className="h-4 w-4" />
        </button>
      </div>

      {showDots ? (
        <div className="mt-4 flex items-center justify-center gap-2">
          {slides.map((slide, index) => (
            <button
              key={`dot-${slide.id}`}
              type="button"
              onClick={() => setActiveIndex(index)}
              className={cn(
                "h-2.5 w-2.5 rounded-full border transition-all",
                index === activeIndex
                  ? "border-foreground bg-foreground"
                  : "border-border bg-muted hover:bg-muted/80"
              )}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      ) : null}
    </div>
  );
}
Carousel Fade

Dependencies

Files

Installation
