【Next.js】画像スライダー・カルーセルの作り方を紹介｜CSS と Embla

"use client";

  import Image from "next/image";
  import { useRef, useState } from "react";

  const slides = [
    { src: "/carousel/01.jpg", alt: "木の机に置かれた白いマグカップ" },
    { src: "/carousel/02.jpg", alt: "マグカップを横から見た写真" },
    { src: "/carousel/03.jpg", alt: "マグカップの持ち手の拡大" },
    { src: "/carousel/04.jpg", alt: "色違いのマグカップが3つ並んだ写真" },
  ];

  export function ImageCarousel() {
    const trackRef = useRef<HTMLDivElement>(null);
    const [index, setIndex] = useState(0);

    const scrollToIndex = (i: number) => {
      const track = trackRef.current;
      if (!track) return;
      const next = Math.max(0, Math.min(slides.length - 1, i));
      track.scrollTo({ left: next * track.clientWidth, behavior: "smooth" });
    };

    const onScroll = () => {
      const track = trackRef.current;
      if (!track) return;
      setIndex(Math.round(track.scrollLeft / track.clientWidth));
    };

    return (
      <section
        aria-roledescription="carousel"
        aria-label="商品の写真"
        className="mx-auto max-w-4xl px-6 py-24"
      >
        <div
          ref={trackRef}
          onScroll={onScroll}
          className="flex snap-x snap-mandatory overflow-x-auto rounded-2xl [scrollbar-width:none]"
        >
          {slides.map((slide, i) => (
            <div
              key={slide.src}
              role="group"
              aria-roledescription="slide"
              aria-label={`${i + 1} / ${slides.length}`}
              className="relative aspect-[3/2] w-full shrink-0 snap-center"
            >
              <Image
                src={slide.src}
                alt={slide.alt}
                fill
                sizes="(min-width: 896px) 848px, 100vw"
                className="object-cover"
                priority={i === 0}
              />
            </div>
          ))}
        </div>

        <div className="mt-4 flex items-center justify-between">
          <button
            type="button"
            onClick={() => scrollToIndex(index - 1)}
            disabled={index === 0}
            aria-label="前の写真"
            className="grid h-10 w-10 place-items-center rounded-full border border-zinc-300 disabled:opacity-30"
          >
            ←
          </button>

          <div className="flex gap-2">
            {slides.map((slide, i) => (
              <button
                key={slide.src}
                type="button"
                aria-label={`${i + 1} 枚目を表示`}
                aria-current={i === index}
                onClick={() => scrollToIndex(i)}
                className={`h-2 w-2 rounded-full transition-colors ${i === index ? "bg-zinc-900" : "bg-zinc-300"}`}
              />
            ))}
          </div>

          <button
            type="button"
            onClick={() => scrollToIndex(index + 1)}
            disabled={index === slides.length - 1}
            aria-label="次の写真"
            className="grid h-10 w-10 place-items-center rounded-full border border-zinc-300 disabled:opacity-30"
          >
            →
          </button>
        </div>
      </section>
    );
  }

const [playing, setPlaying] = useState(true);
  const [hovered, setHovered] = useState(false);

  useEffect(() => {
    if (!playing || hovered) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    const id = window.setInterval(() => {
      const track = trackRef.current;
      if (!track) return;
      const current = Math.round(track.scrollLeft / track.clientWidth);
      const next = (current + 1) % slides.length;
      track.scrollTo({ left: next * track.clientWidth, behavior: "smooth" });
    }, 5000);

    return () => window.clearInterval(id);
  }, [playing, hovered]);

  // section に付ける
  // onMouseEnter={() => setHovered(true)}
  // onMouseLeave={() => setHovered(false)}
  // onFocus={() => setHovered(true)}
  // onBlur={() => setHovered(false)}

  // ボタンの並びに足す
  <button
    type="button"
    onClick={() => setPlaying((p) => !p)}
    className="rounded-full border border-zinc-300 px-4 py-2 text-sm"
  >
    {playing ? "自動再生を止める" : "自動再生する"}
  </button>

"use client";

  import Image from "next/image";
  import useEmblaCarousel from "embla-carousel-react";

  type Slide = { src: string; alt: string };

  export function EmblaCarousel({ slides }: { slides: Slide[] }) {
    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });

    return (
      <section aria-roledescription="carousel" aria-label="作品の写真" className="mx-auto max-w-4xl px-6 py-24">
        <div ref={emblaRef} className="overflow-hidden rounded-2xl">
          <div className="flex">
            {slides.map((slide, i) => (
              <div key={slide.src} className="relative aspect-[3/2] min-w-0 flex-[0_0_100%]">
                <Image
                  src={slide.src}
                  alt={slide.alt}
                  fill
                  sizes="(min-width: 896px) 848px, 100vw"
                  className="object-cover"
                  priority={i === 0}
                />
              </div>
            ))}
          </div>
        </div>

        <div className="mt-4 flex justify-between">
          <button type="button" aria-label="前の写真" onClick={() => emblaApi?.scrollPrev()}>
            ←
          </button>
          <button type="button" aria-label="次の写真" onClick={() => emblaApi?.scrollNext()}>
            →
          </button>
        </div>
      </section>
    );
  }