Image carousel

1type CarouselState = {2  logicalIndex: number; trackIndex: number;3  mode: 'idle' | 'dragging' | 'animating'; dragX: number;4  interacted: boolean; hovered: boolean; focusWithin: boolean;5};6const mayAutoplay = !reducedMotion && !state.interacted && !state.hovered && !state.focusWithin;

1import { useEffect, useReducer, useRef, useState } from "react";2
3type Slide = { id: string; src: string; alt: string };4type State = { trackIndex: number; animating: boolean; paused: boolean };5type Action =6  | { type: "next" } | { type: "prev" }7  | { type: "settled"; count: number }8  | { type: "pause" } | { type: "resume" };9
10function reducer(state: State, action: Action): State {11  switch (action.type) {12    case "next":13      return state.animating ? state : { ...state, trackIndex: state.trackIndex + 1, animating: true };14    case "prev":15      return state.animating ? state : { ...state, trackIndex: state.trackIndex - 1, animating: true };16    case "settled":17      // if we animated onto a clone, jump instantly to the matching real slide18      if (state.trackIndex === 0) return { ...state, trackIndex: action.count, animating: false };19      if (state.trackIndex === action.count + 1) return { ...state, trackIndex: 1, animating: false };20      return { ...state, animating: false };21    case "pause":22      return { ...state, paused: true };23    case "resume":24      return { ...state, paused: false };25  }26}27
28const reducedMotion = () =>29  typeof window !== "undefined" &&30  window.matchMedia("(prefers-reduced-motion: reduce)").matches;31
32export function Carousel({ slides, autoplayMs = 4000 }: { slides: Slide[]; autoplayMs?: number }) {33  const count = slides.length;34  const [state, dispatch] = useReducer(reducer, { trackIndex: 1, animating: false, paused: false });35  const [dragX, setDragX] = useState(0);36  const startX = useRef<number | null>(null);37
38  const logicalIndex =39    state.trackIndex === 0 ? count - 140    : state.trackIndex === count + 1 ? 041    : state.trackIndex - 1;42
43  // Autoplay: off for reduced motion or a hidden tab, paused while the user is involved.44  useEffect(() => {45    if (state.paused || reducedMotion() || document.hidden) return;46    const timer = setInterval(() => dispatch({ type: "next" }), autoplayMs);47    return () => clearInterval(timer);48  }, [state.paused, autoplayMs]);49
50  function onPointerDown(event: React.PointerEvent) {51    if (state.animating) return;52    event.currentTarget.setPointerCapture(event.pointerId);53    startX.current = event.clientX;54    dispatch({ type: "pause" });55  }56  function onPointerMove(event: React.PointerEvent) {57    if (startX.current !== null) setDragX(event.clientX - startX.current);58  }59  function onPointerUp(event: React.PointerEvent) {60    if (startX.current === null) return;61    const delta = event.clientX - startX.current;62    const threshold = event.currentTarget.clientWidth * 0.25;63    startX.current = null;64    setDragX(0);65    if (delta <= -threshold) dispatch({ type: "next" });66    else if (delta >= threshold) dispatch({ type: "prev" });67    dispatch({ type: "resume" });68  }69
70  const track = [slides[count - 1], ...slides, slides[0]]; // clone, reals, clone71  const offset = -state.trackIndex * 100;72
73  return (74    <section75      aria-roledescription="carousel"76      aria-label="Gallery"77      onMouseEnter={() => dispatch({ type: "pause" })}78      onMouseLeave={() => dispatch({ type: "resume" })}79      onFocusCapture={() => dispatch({ type: "pause" })}80      onBlurCapture={() => dispatch({ type: "resume" })}81    >82      <div style={{ overflow: "hidden" }}>83        <div84          style={{85            display: "flex",86            transform: "translateX(calc(" + offset + "% + " + dragX + "px))",87            transition: state.animating ? "transform 0.4s ease" : "none",88          }}89          onTransitionEnd={() => dispatch({ type: "settled", count })}90          onPointerDown={onPointerDown}91          onPointerMove={onPointerMove}92          onPointerUp={onPointerUp}93        >94          {track.map((slide, i) => (95            <div96              key={i}97              role="group"98              aria-roledescription="slide"99              aria-hidden={i !== state.trackIndex}100              style={{ flex: "0 0 100%" }}101            >102              <img103                src={slide.src}104                alt={i === state.trackIndex ? slide.alt : ""}105                loading={i === state.trackIndex ? "eager" : "lazy"}106              />107            </div>108          ))}109        </div>110      </div>111
112      <button type="button" aria-label="Previous slide" onClick={() => dispatch({ type: "prev" })}>\u2039</button>113      <button type="button" aria-label="Next slide" onClick={() => dispatch({ type: "next" })}>\u203a</button>114
115      <p role="status" aria-live="polite" className="sr-only">116        Slide {logicalIndex + 1} of {count}117      </p>118    </section>119  );120}