SearchF
April 10, 2026/Intermediate/Carousels & Sliders

Card Slider

A draggable horizontal card slider built with GSAP Draggable and InertiaPlugin. Supports snap-to-slide, momentum scrolling, mousewheel, keyboard navigation, and prev/next buttons. Responsive slide width via CSS container queries.

Live Demo ↗

Preview

Kickandbass
KickandbassShopify / Motion
Westend
WestendCampaign / Web
Kevin Davis
Kevin DavisPortfolio
Delivrd
DelivrdBrand / Web
Socialstats
SocialstatsProduct / Design
Editorial
EditorialArt Direction
Portraits
PortraitsPhotography

Source

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

export default function CardSliderDemo() {
  return (
    <div className={styles.page}>
      <p className={styles.label}>[ Card Slider ]</p>
      <CardSlider {...cardSlider} />
    </div>
  );
}

Dependencies

  • gsap

Related Components

1MO AGO
Infinite Card Carouselcarousels
3MO AGO
Cascading Slidercarousels