Sliders & Marquees
Carousels, infinite marquees, and sliding content patterns.
Cascading Slider
A cascading carousel that uses clip-path to reveal and hide slides. Supports responsive breakpoints, keyboard navigation, click-to-navigate, and automatic slide duplication for seamless looping. Works with any number of slides.
Line Reveal Testimonials
A testimonial slider that animates text line-by-line with a clip-path image reveal. Supports autoplay with viewport-aware pause/resume, keyboard navigation, reduced-motion fallback, and multiple instances per page.
Dropping Cards Stack
A stacked card slider with drag-to-dismiss support. Cards animate in and out with a dropping motion. Supports next/prev buttons, keyboard navigation, drag threshold, and automatic card duplication for seamless looping.
Draggable Marquee (Directional)
A looping marquee that responds to drag and touch input, shifting speed and direction based on pointer velocity, then easing back to its default travel direction.
Overlapping Slider
A horizontally draggable slider where background cards scale down and rotate as they overlap behind the active slide, with inertia, snap, and keyboard navigation built in.
Swiper Slider Setup
A responsive draggable slider built with the Swiper library, featuring breakpoint-based slides-per-view, optional prev/next buttons, dot pagination, mousewheel support, and keyboard navigation.
3D Image Carousel
A cylindrical 3D image carousel that spins continuously, responds to drag with inertia, accelerates on scroll, and plays an intro animation when it enters the viewport.
Flick Cards Slider
A stacked card slider where dragging flicks through cards with elastic snap animations, progressive opacity and scale based on layer depth, and CSS-attribute-driven state for styling active and adjacent cards.
Basic GSAP Slider (Watch CSS)
A responsive draggable slider powered by GSAP and Draggable whose slides-per-view, gap, and enabled state are all controlled by CSS custom properties, with automatic snap points, inertia, optional prev/next buttons, and full ARIA support.
Stacked Cards Slider
A stacked card slider where the top card can be dragged or flicked left/right to cycle through the deck, with alternating rotation, elastic snap-back animations, and an optional shuffle button.
Centered Looping Slider
A centered infinite looping slider with draggable momentum, optional autoplay that pauses on hover and off-screen, bullet thumbnail navigation, prev/next buttons, and CSS active-state hooks for styling the focused slide.
CSS Marquee
A lightweight looping marquee powered by a single CSS keyframe animation. JavaScript optionally duplicates the list for a seamless loop, calculates speed from element width, and pauses animation when the marquee is off-screen.
Flickity Slider Setup (Watch CSS)
A responsive Flickity slider that uses Flickity's watchCSS option to enable or disable itself based on CSS, with custom prev/next buttons, dot pagination, slide count attributes, and multi-instance support.
Marquee with Scroll Direction
A GSAP-powered marquee that inverts its travel direction based on scroll direction, adds a parallax speed-boost effect on scroll, and exposes a data-marquee-status attribute for CSS-driven directional styling.
Draggable Infinite Slider (GSAP Draggable)
A full-viewport infinite looping slider with drag and inertia, animated slide-count numbers, responsive active-slide offset logic, and prev/next button navigation — all built on the GSAP horizontalLoop helper.