42 JavaScript Sliders
Bring motion and interactivity to your UI with these JavaScript sliders. This collection covers a wide range of use cases - from content carousels and image galleries to range inputs and testimonial sliders - all enhanced with seamless transitions, autoplay, and navigation controls.
Last updated:
Simple and Responsive Image Slider
A smooth, responsive image slider where slides glide horizontally via container translation, featuring dynamic navigation dots and adaptive resizing.
Background Slider
An atmospheric and immersive gallery where the main content (slide) is the focus, and the page background serves as its blurred and darkened echo, creating a unified visual space.
Double Vertical Slider
An elegant and unusual content presentation where text and visuals interact dynamically, sliding past each other during transitions.
Image Carousel
A self-playing image carousel that synchronizes the page’s background with the active slide.
Swiper Center Thumbnail Slider
A dual-slider gallery implemented with Swiper.js, featuring a main view synced with a thumbnail carousel via the controller module.
Endless News Ticker Slider
An autonomous, neat news ticker that draws attention with dynamics without being annoying, allowing the user to anticipate the next content switch.
Full Screen Slider
A cinematic landing page powered by GSAP ScrollSmoother and Observer plugins. It features a complex preloader sequence transitioning into a full-screen slider where images are revealed via intricate clip-path polygon animations triggered by scroll gestures.
Huge Headers and Mega Menus
An immersive, cinematic landing page that captures user attention with smooth, complex animation and offers convenient navigation via a stylish fullscreen menu.
Vertical Full-Screen Slider with 4 Controls
A high-performance, fluid, and responsive slider rich in interactivity, where motions are synchronized with user actions to create a “weighted,” physically tangible interface feel.
Slider #2
An immersive, cinematic slider that feels like a high-budget interactive installation, thanks to its complex animations, custom cursor, and comprehensive input support.
Yet Another Slider
A cinematic slider where frame transitions occur via complex vertical sliding of image fragments, accompanied by a smooth custom cursor.
Image Gallery with GSAP Observer Plugin
A seamless image slider featuring an infinite-scroll SVG navigation menu powered by GSAP’s Observer plugin. The interaction logic translates scroll and swipe deltas into timeline progress, utilizing complex snapping algorithms and opacity tweens to create a fluid, kinetic browsing experience that dynamically updates the active index.
WebGL Liquid Slider Transition
A high-performance WebGL slider that leverages displacement mapping to create liquid, kinetic transitions via the rgbKineticSlider library. The JavaScript configuration orchestrates intricate RGB split effects and cursor interactions rendering onto a canvas, while CSS implements a glassmorphic UI overlay using backdrop-filter to ensure the travel booking widget floats distinctively above the distortion effects.
Cascading Image Slider
An elegant slider where the entire scrolling logic is built not on transforms, but on DOM manipulation. JavaScript uses appendChild and prepend to reorder the elements, and CSS instantly picks up the changes via :nth-child and transition to create a smooth, cascading effect.
Halloween Ghost Carousel with Swiper.js
A striking, responsive 3D-slider, built on Swiper.js with a coverflow effect and lazy loading, showcases deep customization: slide transitions dynamically update the background and theme color via the changeBackground JS function and data-bg-color attributes, while complex autoplayTimeLeft logic ensures precise visual representation of the autoplay progress within custom CSS/SVG UI elements.
Page Indicator Animation
A full vertical slider with scroll-snap points. The navigation indicator is dynamically animated using the Intersection Observer API, which tracks when a slide enters the viewport.
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.
Cube Effect Slider (Swiper JS and tsParticles)
a stylish full-screen layout where the functional Swiper 3D slider is enhanced by a particle-effect gradient background, ensuring maximum visual engagement without complex frameworks.
Minimal Carousel (No Dependencies)
An ultra-lightweight slider showcasing a clean implementation of essential functionality (including infinite looping and arrow navigation) via direct CSS positioning manipulation using Vanilla JavaScript.
Horizontal Parallax Sliding Slider with Swiper.js
A horizontal parallax slider built on Swiper.js, featuring a unique navigation system where a vertical preview slider is fully synchronized with the main one, providing a comfortable and stylish viewing experience.
Card Slider
An interactive, responsive content component built on vanilla JavaScript (Swiper), highlighting CSS transitions for the slide change effect, complete with custom navigation and modular styling via SCSS for easy customization.
rgbKineticSlider (WebGL Transitions)
This dynamic slider utilizes a displacement map to render cinematic transitions, while finely tuned cursor momentum guarantees a smooth and highly responsive kinetic interaction across all devices.
Liquid Morphology Slideshow (Three.js/WebGL)
This is a WebGL-powered image slider utilizing custom fragment shaders to create complex transition effects, structured with a comprehensive JavaScript configuration object and Tweakpane integration for real-time control over numerous uniform parameters.
Page Transition Carousel using Web Animations API
A striking full-screen slider featuring custom cubic Bezier curves, where the Web Animations API (in the JS code) is utilized to orchestrate a staggered slide transition via a “curtain” effect.
Dynamic Carousel Slider with Infinite Scroll
A full-screen, scroll-hijacked slider orchestrated by a single GSAP timeline, achieving a sophisticated transition effect by simultaneously animating clip-path on image layers and translating text elements.
Center-Mode Productivity Slider (Pro v5)
The “Accordion” effect is achieved using CSS transitions on the flex-basis property, while navigation is enabled via buttons, dots, or swipe detection with a separate Media Query for full responsiveness.
Stellar 3D Slide Navigator
A visually rich interactive carousel that uses a combination of CSS 3D transforms for a smooth parallax effect and the Web Audio API for custom soundscapes. The code is structured into dedicated classes for clean, scalable management.
Autoplay Slider with Pause Control (Swiper.js)
This is an advanced slider implementation using JavaScript and the Swiper library, with a key feature being its custom autoplay functionality. The automatic slide transition is synchronized with a progress bar in the pagination, which can be paused and resumed.
