Infinite Slider

CSS marquee. Children are duplicated and animated with translateX for a seamless infinite loop. No JS timers.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Infinite SliderCSS marquee. Children are duplicated and animated with translateX for a seamless infinite loop. No JS timers.

"use client";

type InfiniteSliderProps = {
  children: React.ReactNode;
  speed?: number;
  gap?: number;
  reverse?: boolean;
};

export function InfiniteSlider({ children, speed = 40, gap = 16, reverse = false }: InfiniteSliderProps) {
  const duration = Math.max(4, 1200 / speed);
  return (
    <div className="mp-infinite-slider">
      <div
        className={"mp-infinite-slider-track" + (reverse ? " mp-infinite-slider-track--reverse" : "")}
        style={
          {
            "--slider-gap": gap + "px",
            "--slider-duration": duration + "s",
          } as React.CSSProperties
        }
      >
        <div className="mp-infinite-slider-set">{children}</div>
        <div className="mp-infinite-slider-set" aria-hidden="true">
          {children}
        </div>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to loop
speed	number	40	Scroll speed (px/s equivalent)
gap	number	16	Gap between items in px
reverse	boolean	false	Reverse scroll direction