Premium Before After Media Slider

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 an unbelievably lightweight 8.5KB (minified), it won't slow down your page speed, yet it packs high-end features you won't find in standard sliders, including Video Synchronization and an interactive "X-Ray" lens mode.

Features

• Image & Video Support: Compare static images or looping videos. Our custom Smart-Sync technology ensures videos stay aligned, even when users switch browser tabs!
• Visual Code Generator Included: No coding required! Use the included visual generator to upload your URLs, customize colors, tweak layouts, and instantly copy the final, production-ready HTML and JS.
• X-Ray Lens Mode: Go beyond the standard swipe bar. Let users explore the "After" image using 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.
• Responsive & Touch-Friendly: Engineered for flawless swiping on mobile devices and tablets.
• Customizable UI: Easily change handle colors, line colors, label text, and toggle "Dark Mode" styling for the labels.

Important Note for Video Users: To ensure maximum compatibility and adhere to strict mobile browser auto-play policies (especially on iOS), video playback is muted by default. This ensures your videos always auto-play flawlessly on iPhone and iPad without blocking user interaction.

Instructions

1. Upload the Library Files

Upload the contents of the /ba-slider folder (main.min.js and style.min.css) to your website server via FTP or your file manager.

2. Use the Visual Generator

Open /generator/generator.html in your browser.

• Paste the Direct URLs of your images or videos (ensure they are already uploaded to your server/WordPress).
• Customize the colors, X-Ray size, and orientation.
• Click "Copy Code" to get your custom HTML and initialization script.

3. Place the Code

Paste the generated code into your website's HTML:

• CSS: Move the <link> tag to the <head> section.
• HTML: Place the <div class="ba-slider"> block where you want the slider to appear.
• JS: Place the <script> tags at the bottom of the page, just before the closing </body> tag.

⚠️ Critical Note on Paths

Ensure the href in the CSS link and the src in the JS link point to the exact location where you uploaded the files in Step 1.

• Example: href="https://yourdomain.com/css/style.min.css"

For more detailed customization options, please refer to the README.md file included in the main ZIP package.