Show the difference on your HubSpot pages
Get the Before After Image Slider from the HubSpot Marketplace and add it to any page in minutes.
Before After Image Slider
Show the change, not just the result. A drag-to-compare slider for HubSpot pages: renovations, retouched photos, redesigns and client results in one gesture.
Works in any HubSpot theme · Fully editable from the Styles tab · Accessible · No libraries
Renovation
See the difference
Drag the handle to compare the room before and after the renovation.
Built to fit any theme
Install it once and use it on any page, whatever theme your site runs on. It takes your theme fonts and your brand colour by default, and you can change every detail.
Works in any theme
Self-contained CSS and JavaScript with prefixed classes, so it never clashes with your theme. Fonts left empty use the fonts of your site.
Style every detail
Four handle shapes, three icons, divider, labels, corners, border, spacing, layout and image shape, all from the Styles tab.
Your brand colour
The handle and the after label take the primary colour of your HubSpot brand kit. Icon and label text switch to black or white for contrast.
Horizontal or vertical
Compare left and right or top and bottom. Put the text above, below or beside the images, or show the images alone.
Accessible by default
Keyboard support with arrows, Page Up, Page Down, Home and End, a real slider for screen readers, and reduced motion respected.
Light and fast
Vanilla JavaScript, no jQuery and no external libraries. Mouse, touch and pen. Add as many sliders as you like to one page.
One module, many styles
These three sliders are the same module with different settings in the Styles tab. Drag them, or use the arrow keys.
Vertical
Top and bottom
Vertical direction, pill handle with chevrons and labels at the bottom.
Dark style
Square handle
Dark handle with grip lines, square corners and labels as written.
Minimal
Line only
No handle, no labels and a follow-the-pointer mode on desktop.
Who uses a before and after slider?
Any business whose work is easier to show than to explain.
Renovation and interiors
Builders, interior designers and architects showing a space before and after the work.
Real estate
Agencies comparing an empty property with home staging, or a plan with the finished build.
Photo retouching
Photographers and studios proving the value of their editing, colour grading and restoration.
Website redesigns
Agencies showing the old and the new version of a client's site in their case studies.
Health and beauty
Clinics, salons and dentists presenting treatment results, with the consent of their clients.
Products and results
Cleaning, repair and software companies comparing a dashboard, a surface or a product before and after.
Up and running in three steps
- Install it from the HubSpot Marketplace. The module is added to your portal and is ready in every theme.
- Add it to a page. In the page editor, click Add, search for Before After Image Slider and drag it into any section.
- Choose your two images. Pick the before and after images, write the alt text, and adjust colours, handle and layout in the Styles tab if you want to.
Tip: use two images with the same size and framing, for example two photos taken from the same spot.
What you can change
- Content: eyebrow, heading, heading level, description, images, alt text, caption and labels.
- Behaviour: horizontal or vertical, starting position, drag or follow the pointer, keyboard step and accessible name.
- Styles: fonts, text alignment, background, border, corners, spacing, text position, maximum width, image shape and fit.
- Handle and labels: divider colour and width, handle shape, size, colour and icon, label position, colours and capitals.
- Animation: a short hint movement when the slider appears and smooth movement on click.
Frequently asked questions
Does it work with my theme?
Yes. The module brings its own CSS and JavaScript with prefixed class names, so it works in any HubSpot theme, including marketplace themes and custom ones. It uses your theme fonts unless you choose others.
Can I use it more than once on the same page?
Yes. Every slider works on its own and keeps its own settings, so you can add as many as you need.
Does it work on mobile?
Yes. Visitors drag with a finger on touch screens, the page still scrolls normally, and text placed beside the images moves above them on small screens.
Is it accessible?
The handle works as a slider for screen readers and with the keyboard: arrow keys, Page Up, Page Down, Home and End. The hint animation is skipped for visitors who prefer reduced motion. Remember to fill in the alt text of both images.
Can I match my brand?
Yes. The handle and the after label start with the primary colour of your HubSpot brand kit, and every colour, font, size and corner can be changed in the Styles tab.
Does it need any external library or account?
No. It uses plain JavaScript, with no jQuery, no external libraries and no third-party accounts.
Where can I get help?
Write to hola@digitalmakers.cat. We answer in English, Spanish and Catalan.