Before / After Slider
A responsive image comparison slider for HubSpot CMS — drag to reveal before and after, with optional labels, horizontal or vertical orientation, and full style controls. Perfect for agencies, design, renovation, skincare, and photo editing pages.
Overview
Before / After Slider lets marketers showcase transformations with an intuitive drag comparison — ideal for home renovation, skincare results, photo editing, AI image generation, and agency portfolio pages. Upload two images, add optional labels, and publish in minutes.
Features
- Interactive drag slider — mouse, touch, and keyboard
- Before and after image fields with alt text
- Optional Before / After labels
- Horizontal or vertical slider direction
- Aspect ratio presets — 16:9, 4:3, 3:2, 1:1, or auto
- Custom handle, divider, and label colors
- Adjustable initial slider position
- Custom ID and Custom CSS Class (Advanced settings)
- Fully responsive on desktop and mobile
Use cases
Agencies, design studios, AI image tools, home renovation, skincare brands, and photo editing services — anywhere you need to show a visual before-and-after transformation.
Requirements
No third-party accounts or API keys. Works on HubSpot CMS landing pages and website pages with drag-and-drop areas.