69 JavaScript Carousels

This 3D Parallax Card Slider brings a tangible, high-fidelity feel to web galleries. It goes beyond simple sliding by implementing a physics-based tilt effect that reacts to mouse movement, giving each card weight and depth. The background adapts seamlessly to the active slide, creating an immersive atmosphere perfect for luxury travel sites or premium portfolios.

This Adaptive Thumbnail Carousel is a versatile gallery component that seamlessly bridges the gap between desktop and mobile UX. On desktop, it presents a traditional filmstrip of thumbnails. On mobile, it intelligently morphs into a dot-navigation style, where hovering (or tapping) a dot reveals a floating preview of the image. The carousel handles state synchronization, smooth scrolling, and accessibility, making it a robust choice for e-commerce product pages or portfolios.

This Draggable 3D Parallax Image Ring creates a high-end, immersive gallery experience often associated with WebGL, but built entirely with DOM elements and GSAP. It arranges images in a 3D circle that users can spin with a swipe or mouse drag. The standout feature is the calculated parallax effect: as the ring rotates, the background position of each image shifts in the opposite direction, creating a convincing illusion of depth and window-like transparency.

An infinite 3D card carousel powered by GSAP ScrollTrigger.

An elegant, cinematic slider that allows users to “flip” through content with a sense of depth, drawing attention to the central item.

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.

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.

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.

A current component built with HTML/CSS/JS utilizing the Swiper library to create a high-speed, responsive card carousel.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.