IT 
EN Image Comparison Slider is a Joomla module that lets you compare two images with an interactive before/after interface. It is designed to showcase visual transformations, photo edits, renovations, historical changes, and similar side-by-side comparisons in a clear and engaging way.
Overview
Image Comparison Slider lets you display two overlapping images with a draggable handle, making it easy to compare a “before” and “after” state visually.
The module is well suited to websites that need to highlight differences clearly, such as renovation showcases, photo retouching, design portfolios, historical comparisons, or quality improvements, and it is built to provide a responsive and accessible experience across devices.
Interactive comparison
A draggable slider makes comparing two images quick and intuitive.
Responsive
Works across desktop, tablet, and smartphone layouts with touch-friendly interaction.
Accessible
The module is designed with accessibility, keyboard support, ARIA, and reduced-motion preferences in mind.
Requirements
Image Comparison Slider is distributed as a free Joomla module, and its public JED listing states compatibility with Joomla 4, 5, and 6. The GitHub repository presents it as a Joomla!LABS module for interactive before/after image comparison on Joomla websites.
| Requirement | Detail | Notes |
|---|---|---|
| Joomla | Joomla 4, 5, and 6 | The JED listing states compatibility with current Joomla branches. |
| Extension type | Module | The extension is distributed as a Joomla module. |
| JavaScript | Vanilla JavaScript ES6+ | The project highlights a modern no-jQuery architecture. |
| Images | Two well-matched images | The comparison works best when both images share the same subject, framing, and proportions. |
Ideal for
- Before/after renovations
- Photo comparison
- Design portfolios
- Then-and-now historical views
- Technical or visual quality comparisons
Installation
- Download the module package from the GitHub repository or your preferred distribution source.
- Open Joomla administration and go to System → Extensions → Install.
- Upload the package and wait for the installation confirmation.
- Create or edit the module from the module manager.
- Configure the two images, labels, and module position in your template.
What the module provides
After installation, the module lets you build a visual comparison between two images through a draggable handle, while keeping the overall experience modern, lightweight, and performance-oriented.
- Two images to compare.
- Optional labels for the before and after states.
- Drag, touch, and keyboard interaction.
- Responsive rendering across different layouts.
Configuration
Module configuration mainly depends on preparing the two images correctly and setting clear contextual labels. A good setup makes the comparison easier to understand, more readable, and more useful for visitors.
Before and after images
Use images that are consistent in subject, proportions, and framing, otherwise the comparison will feel less effective.
Labels
Optional captions or labels help users understand the meaning of each side of the comparison.
Placement context
The module works well in portfolio pages, landing pages, project showcases, and editorial content that depends on visual comparison.
Good practice
- Use images with the same size or aspect ratio.
- Avoid major crop differences.
- Keep labels short and readable.
- Always test behavior on mobile devices.
- Place the module in an area with enough visual space.
Features
The public extension listing highlights a modern feature set focused on usability, accessibility, and performance.
Draggable slider
A smooth and intuitive drag interface for comparing two images visually.
Touch-friendly
Full support for mobile and tablet interaction.
Lazy loading
Images load only when needed to improve page performance.
Smooth animations
The module uses CSS3-powered transitions and modern observers for a more efficient experience.
Accessibility
Accessibility is one of the module’s main strengths, and the public listing describes it as WCAG 2.1 AAA compliant with support for keyboard navigation, screen readers, and focus management.
Keyboard navigation
Supports arrow keys and Home/End for slider control without relying on a mouse.
Screen reader ready
ARIA attributes improve compatibility with assistive technologies.
Visible focus
The module includes focus handling designed to keep interaction clear and trackable.
Reduced motion
It respects user preferences related to reduced motion effects.
Modern stack
- Zero jQuery.
- Native ES6+ JavaScript.
- Web Asset Manager.
- PSR-12 compliant code.
- Performance improvements through IntersectionObserver and ResizeObserver APIs.
Use cases
- Showing a before/after state for renovation work.
- Comparing an original photo with an edited version.
- Presenting differences in a graphic or photography portfolio.
- Displaying historical then-and-now image comparisons.
- Highlighting technical or visual improvements between two versions.
- Making an important visual change easier to understand at a glance.
Why use it
When the change is visual, a before/after comparison usually explains it better than plain text. This module is built to turn that difference into a clear, immediate, and accessible interaction.
Troubleshooting
The comparison does not display correctly
Check that both images are configured and that the module is published in the correct position.
The images look misaligned
Use images with matching proportions and framing for a cleaner comparison.
The mobile experience feels awkward
Check the container width, available space, and image quality on smaller screens.
The module feels too heavy
Optimize image file sizes before upload, even though the module supports lazy loading.
Focus or keyboard interaction is not obvious
Check whether template-level CSS overrides are interfering with accessibility styles.
The layout feels too narrow
Place the module inside a container with enough width so the handle and image area remain easy to use.