65 JavaScript Carousels
Carousels are a popular way to showcase content in a rotating, space-efficient layout. This collection of JavaScript carousel components features auto-play sliders, swipe support, pagination controls, and smooth transitions - ideal for product showcases, testimonials, and media galleries.
Last updated:
3D Slider
An elegant, cinematic slider that allows users to “flip” through content with a sense of depth, drawing attention to the central item.
Parallax Carousel with GSAP Observer
Images drift horizontally at varying speeds and sizes, establishing a tangible sense of depth. Upon user interaction, the scroll accelerates or reverses direction with a satisfyingly elastic, spring-like response.
Infinite Cover Flow with GSAP and Tailwind
Experience a sophisticated “pinned” scrolling effect where a vertical scroll action drives a horizontal card carousel. GSAP’s pin: '.gallery' property freezes the component in the viewport, while ScrollTrigger’s onUpdate callback scrubs a GSAP timeline to animate the cards’ xPercent, scale, and opacity.
Infinite Scrolling Cards with GSAP and ScrollTrigger
A demonstration of an advanced GSAP technique for an infinite carousel, where the animation of each element is cyclically repeated with precise staggering, creating the feeling of continuous 3D space.
Responsive Image Slider with Swiper
A current component built with HTML/CSS/JS utilizing the Swiper library to create a high-speed, responsive card carousel.
Swiper Slider Abstract Art Gallery
A ready-made frontend solution for creating a dynamic art gallery or product catalog, leveraging the advanced Swiper library. The focus is on current technical practices, including keyboard navigation and adaptive spacing changes upon screen resize.
Carousel with Drag and Wheel Input
This purely vanilla JS/CSS image carousel delivers superior performance with native drag-and-wheel input support, dynamically controlling the 3D-like layout using calculated CSS Custom Properties for position and depth.
Scrolling 3D Card Carousel
An impressive, fully controlled 3D carousel effect where the entire animation sequence - card rotation, stacking, and perspective transition - is synchronized to the user’s scroll depth via GSAP ScrollTrigger, showcasing high-performance transform: rotateX manipulation for engaging visual depth.
Vertical 3D Team Carousel
A slick vertical 3D carousel for a team section, implemented purely with CSS transform-style: preserve-3d for depth and controlled by JavaScript to dynamically apply class-based offsets for a smooth, cubic navigation experience, fully supporting keyboard and touch controls.
Infinite Draggable WebGL Slider
See how Three.js and custom Shaders (Vertex/Fragment) create a striking chromatic aberration and “liquid” distortion effect on images in a GSAP-controlled horizontal slider.
3D Slider Cards Carousel
An immersive 3D Circular Slider using GSAP for smooth, complex transform animations and rotations, creating a perspective-driven carousel where card properties are dynamically mapped and updated upon rotation.
Card Beam Animation Effect
Implemented motion physics for an interactive carousel: uses an requestAnimationFrame loop for smooth movement and applies an inertia effect after dragging (Drag/Touch) by gradually decaying this.velocity with friction (this.friction).
GSAP horizontalLoop() for Seamless Looping
This demo highlights a fluid, infinite carousel powered by GSAP, using xPercent for true responsiveness with mixed-width content and the Draggable plugin for seamless, inertia-based interaction.
Three.js Carousel with Shader Distortion
This demo is a showcase of cool animation with WebGL and Three.js, where smooth scrolling via Lenis combines with interesting visual effects like RGB shift and image deformation.
GSAP Fanned Cards Carousel
A visually impressive carousel with physics and animation controlled by the mouse. The code uses GSAP to create a realistic “fanning” motion for the cards, dynamically adjusting their position and animation delay for a smooth transition.
