1/3 - Before / After Slider Details
Overview
Before / After Slider is a smooth, fully responsive image comparison module for HubSpot CMS — built for renovation, interior design, skincare, photo editing, and agency portfolios that need to show transformations with impact.
Visitors drag a slider handle to reveal the before and after images, with support for horizontal or vertical direction, customizable Before/After labels, and a configurable starting position. Choose from five aspect ratios (16:9, 4:3, 3:2, 1:1, or auto natural height) and control handle, divider, and label styling entirely from the Style tab — no code required.
Includes:
Drag-to-compare before/after image slider
Horizontal or vertical slider direction
Five aspect ratios (16:9, 4:3, 3:2, 1:1, auto)
Optional Before / After labels with custom text
Adjustable initial slider position
Custom handle, accent, divider, and label colors
Frame corner radius control
Responsive, resizable images with lazy loading
Custom ID and Custom CSS Class (Advanced settings)
Fully responsive and touch-friendly
Built by CodeByAryan for Magazine Makers. No third-party accounts, API keys, or paid services required.
Features
Drag-to-Compare Slider
Visitors drag a smooth, touch-friendly handle to reveal before and after images. Perfect for showcasing renovations, edits, and transformations with an interactive reveal.
Horizontal or Vertical Direction
Switch the slider between horizontal and vertical orientation to suit your images and layout, with the divider and handle adapting automatically.
Customizable Labels & Handle
Toggle Before/After labels, set your own label text, and style the handle, accent, divider, and label colors from the Style tab to match your brand.
Flexible Aspect Ratios
Choose from 16:9 widescreen, 4:3 standard, 3:2 photo, 1:1 square, or auto natural height so your comparison frame fits any content perfectly.
About Module
Total installs Fewer than 10 Created - Jun 25, 2026
Version 1 - Jun 25, 2026
Categories Tags
Requirements
HubSpot Subscription Works with all HubSpot plans
Contact Magazine Makers
Legal Stuff
Please refer to the developer's Privacy Policy and Terms for more information.
Support
Magazine Makers
- Remote
Visit website
Magazine Makers builds production-ready HubSpot CMS modules and high-performance websites for SaaS, agencies, and service brands. Founded by senior HubSpot CMS developer Aryan Antal (CodeByAryan), we create marketplace-ready modules that marketers can configure without code — including pricing tables, comparison layouts, and before/after sliders — plus bespoke theme and module development when off-the-shelf solutions are not enough. Every release is documented, supported, and built with clean HubL, responsive layouts, and performance in mind.
Bug fixes for reported module issues
Help with module configuration and settings
Compatibility support with standard HubSpot themes
Setup and installation assistance
Magazine Makers typically responds in
- Sunday
8:00 PM - 10:00 PM (IST) - Monday
10:00 AM - 7:00 PM (IST) - Tuesday
10:00 AM - 7:00 PM (IST) - Wednesday
10:00 AM - 7:00 PM (IST) - Thursday
10:00 AM - 7:00 PM (IST) - Friday
10:00 AM - 7:00 PM (IST) - Saturday
8:00 PM - 10:00 PM (IST)
