Premium Before / After Slider
The complete comparison module for HubSpot CMS — multiple sliders, custom labels, hotspot markers, scroll animations, auto-sweep effects, video comparison, grid layouts, and full design controls for agencies and visual brands.
Overview
Premium Before / After Slider is built for pages that need more than a single comparison. Add up to 6 sliders per section, annotate changes with hotspot markers, animate on scroll, compare videos side-by-side, and control every visual detail — all editable in the HubSpot page editor.
Features
- Up to 6 comparison sliders per module
- Image and video comparison modes
- Hotspot markers with labels and tooltips
- Scroll animations — fade, slide up, or scale
- Auto-sweep animation on viewport entry
- Label styles — pill, corner ribbon, or floating tag
- Handle styles — circle, bar, or minimal
- Grid layouts — stack, 2-column, or 3-column
- Per-slider titles, labels, and initial position
- Horizontal or vertical slider direction
- Section width, gap, and heading alignment controls
- Custom colors, radius, and aspect ratio presets
- Custom ID and Custom CSS Class (Advanced settings)
- Fully responsive — stacks on mobile
Why upgrade from Free?
The free Before / After Slider covers single image comparisons. Premium adds multiple sliders, video support, hotspot annotations, entrance animations, layout grids, and granular design controls — the features agencies and visual brands need for high-converting transformation pages.
Requirements
No third-party accounts or API keys. Works on HubSpot CMS landing pages and website pages with drag-and-drop areas.