Image Comparison Slider

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