Joomla!LABS Image Comparison Slider Module

Built with modern web standards and accessibility in mind, this module delivers a smooth, responsive experience across all devices while maintaining WCAG 2.1 AAA compliance.

An interactive, accessible image comparison slider for Joomla!

Compare before/after images with a smooth, draggable slider interface

📖 About

The Image Comparison Slider module allows you to create interactive before/after image comparisons on your Joomla! website. Perfect for showcasing transformations, renovations, photo editing, historical changes, and more.

Built with modern web standards and accessibility in mind, this module delivers a smooth, responsive experience across all devices while maintaining WCAG 2.1 AAA compliance.

🎯 Perfect For

• 🏗️ Construction & renovation before/after
• 📸 Photo editing showcases
• 🎨 Design portfolio comparisons
• 🏛️ Historical then/now images
• 🎮 Graphics quality comparisons
• 🌍 Geographic changes over time

✨ Features

🚀 User Experience

• Interactive Draggable Slider - Smooth, intuitive drag interface
• Touch-Friendly - Full support for mobile and tablet devices
• Keyboard Navigation - Complete keyboard accessibility (arrows, Home, End)
• Image Captions - Optional labels for both images
• Smooth Animations - CSS3-powered transitions with IntersectionObserver
• Lazy Loading - Images load only when needed for better performance
• Responsive Design - Adapts perfectly to any screen size

♿ Accessibility

• WCAG 2.1 AAA Compliant - Highest accessibility standards
• Full Keyboard Support - Arrow keys, Home/End navigation
• Screen Reader Ready - Complete ARIA attributes
• Focus Management - Clear visual focus indicators
• Reduced Motion - Respects user motion preferences

🛠️ Technical

• Modern Joomla 6+ Architecture - Namespace, service provider pattern
• Zero jQuery - Pure vanilla JavaScript ES6+
• Web Asset Manager - Proper asset loading and caching
• PSR-12 Compliant - Clean, maintainable code
• Performance Optimized - IntersectionObserver, ResizeObserver APIs
• Lightweight - Minimal footprint, maximum performance