The ultimate comparison slider for web professionals. Whether you are showcasing photo retouching, construction renovations, or visual effects breakdowns, this Premium Before/After Slider delivers flawless performance. Built with modern, pure Vanilla JavaScript, it completely eliminates the need for bulky libraries like jQuery.
At just 8.5KB minified, it won't slow down your page speed, yet it packs high-end features rarely found in standard sliders — including Video Synchronization and an interactive X-Ray lens mode.
Features:
- Image & Video Support: Compare static images or looping videos. Built-in Smart-Sync technology ensures videos stay perfectly aligned, even when users switch browser tabs.
- Visual Code Generator Included: Configure your slider visually — upload URLs, customize colors, tweak layouts, and copy the final production-ready HTML and JS in seconds.
- X-Ray Lens Mode: Go beyond the standard swipe bar. Let users explore the After image through a movable, customizable magnifying glass effect.
- Horizontal & Vertical Modes: Fits any layout requirement seamlessly.
- Zero Dependencies: 100% Vanilla JS and CSS. No jQuery, no bloat.
- Ultra-Lightweight: Only 8.5KB minified. Perfect for Core Web Vitals and SEO scores.
- Responsive & Touch-Friendly: Engineered for flawless swiping on mobile devices and tablets.
- Customizable UI: Easily adjust handle colors, line colors, label text, and toggle Dark Mode styling.
Video Playback Note:
To ensure maximum compatibility with mobile browser autoplay policies — particularly on iOS — video playback is muted by default. This guarantees your videos autoplay flawlessly on iPhone and iPad without blocking user interaction.
