Before After Image Slider
Compare two images with a draggable divider. Works in any HubSpot theme, with every colour, font and size editable from the Styles tab.
1. Add the module to a page
- Open a page, blog post or blog listing in the HubSpot editor.
- Click Add, search for Before After Image Slider and drag it into a section.
- Choose your Before image and After image in the Content tab. Until both are chosen, a demo illustration is shown.
Use two images with the same size and framing (for example two photos taken from the same spot). If they differ, choose an Image shape in Styles › Layout so both are cropped to the same frame.
2. Content tab
| Group | Field | What it does |
|---|---|---|
| Heading and text | Eyebrow, Heading, Heading level, Description | Optional text shown with the slider. Leave everything empty to show only the images. |
| Images | Before image, After image, Caption | The two images and their alt text. The caption appears under the images. |
| Labels | Show labels, Before label, After label | Small tags on each side. Write them in your page language. |
| Slider behaviour | Direction | Horizontal (left and right) or vertical (top and bottom). |
| Starting position | Share of the before image visible when the page loads. | |
| Interaction | Drag the handle or click anywhere, or follow the mouse pointer. Touch screens always drag. | |
| Keyboard step, Accessible slider name | How far each arrow key moves the handle, and the name read by screen readers. |
3. Styles tab
| Group | Options |
|---|---|
| Text | Eyebrow, heading and description fonts, text alignment, eyebrow colour. Empty fonts use your theme fonts. |
| Background | Background colour of the whole module (transparent by default). |
| Border | Width and colour of the border around the images. |
| Corner | Corner radius of the images and of the module. |
| Spacing | Padding and margin, and the space between the text and the images. |
| Layout | Text position (above, below, left, right), text column width, maximum width, alignment, image shape (same as the after image, 16:9, 3:2, 4:3, square, 21:9, 4:5) and image fit. |
| Divider and handle | Divider colour and width, handle shape (circle, rounded square, pill, line only), size, colour, icon (arrows, chevrons, grip lines, none), automatic icon contrast and shadow. |
| Labels | Font, position (top, bottom, middle), background and text colours for each label, automatic text contrast, corner radius and capitals. |
| Caption | Caption font and colour. |
| Animation | Hint movement when the slider first appears, and smooth movement on click. |
The handle colour and the after label start with the primary colour of your HubSpot brand kit (Settings › Brand). Change them in the Styles tab to break the link.
4. Accessibility
- The handle is a slider for assistive technology, with its current value announced.
- Keyboard: arrow keys move by the keyboard step, Page Up and Page Down move twice as far, Home and End go to the edges.
- Always fill in the alt text of both images.
- The hint animation is skipped for visitors who prefer reduced motion.
5. Several sliders on one page
Add as many as you need. Each one has its own settings and works independently.
6. Troubleshooting
The two images do not line up
Export both images with the same size, or choose a fixed image shape with Fill the frame.
The handle is hard to see
Turn on the shadow, increase the handle size or pick a handle colour that contrasts with your images.
The text is too wide beside the images
Adjust Text column width in Styles › Layout. Below 768 px the text always moves above the images.
Support
Email support@digitalmakers.cat. We answer in English, Spanish and Catalan.