June 13, 2026/Advanced/Carousels & Sliders

Infinite Card Carousel

A continuously auto-drifting, infinitely looping horizontal row of image link-cards driven by page scroll. Scrolling down pushes the row one way, scrolling up the other, with velocity + momentum that eases back to a gentle auto-drift. Pinned to the bottom of the viewport; on the home page the wheel scrolls the carousel instead of the page. Each card is a link with a gradient overlay, caption, and staggered fade-in entrance.

Live Demo ↗

Source

import InfiniteCardCarousel from "./index.jsx";
import { infiniteCardCarousel } from "../demo-data.js";
import styles from "./demo.module.css";

export default function InfiniteCardCarouselDemo() {
  return (
    <div className={styles.stage}>
      <p className={styles.label}>[ Infinite Card Carousel ]</p>
      <InfiniteCardCarousel {...infiniteCardCarousel} fixed={false} captureWheel />
    </div>
  );
}

Dependencies

gsap

Related Components

3MO AGO

Card Slidercarousels

3MO AGO

Cascading Slidercarousels

Infinite Card Carousel

Preview

Source

Dependencies

Related Components