---
title: Magazine Makers Premium Before / After Slider
description: Premium HubSpot before/after slider with up to 6 comparisons, hotspot markers, video compare, scroll animations, grid layouts, and full design controls for agencies and visual brands.
---

[MM Magazine Makers](https://module.codebyaryan.com/magazine-makers-home?hsLang=en)

- [Modules](https://module.codebyaryan.com/magazine-makers-modules-hub?hsLang=en)
- [Documentation](https://module.codebyaryan.com/magazine-makers-documentation?hsLang=en)
- [Support](https://module.codebyaryan.com/magazine-makers-customer-support?hsLang=en)
- [Privacy](https://module.codebyaryan.com/magazine-makers-privacy-policy?hsLang=en)

[View Portfolio](https://www.codebyaryan.com/)

[Modules](https://module.codebyaryan.com/magazine-makers-modules-hub?hsLang=en) / Premium Before / After Slider

 Premium Module — $19–39

# Premium Before / After Slider

The complete comparison module for HubSpot CMS — multiple sliders, hotspot markers, scroll animations, video comparison, full-width and custom size controls, configurable Before/After indicator timing, grid layouts, and full design controls for agencies and visual brands.

[Get on HubSpot Marketplace](https://ecosystem.hubspot.com/marketplace/listing/premium-before-after-slider) [View live demo](https://module.codebyaryan.com/premium-before-after-slider-showcase?hsLang=en) [Documentation](https://module.codebyaryan.com/magazine-makers-documentation?hsLang=en)

## 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
- Configurable auto-sweep duration (0.8s–6s)
- Full-width section option
- Custom slider width and height (px) controls
- 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.

### Module info

Price

$19 – $39

Version

1.0

Author

[CodeByAryan](https://www.codebyaryan.com/)

Support

[aryanantal2301@gmail.com](mailto:)

### Quick links

- [Live demo & variations](https://module.codebyaryan.com/premium-before-after-slider-showcase?hsLang=en)
- [Install documentation](https://module.codebyaryan.com/magazine-makers-documentation?hsLang=en)
- [Customer support](https://module.codebyaryan.com/magazine-makers-customer-support?hsLang=en)
- [Marketplace listing](https://ecosystem.hubspot.com/marketplace/listing/premium-before-after-slider)

[MM Magazine Makers](https://module.codebyaryan.com/magazine-makers-home?hsLang=en)

HubSpot CMS modules for the marketplace. Built by Aryan Antal · CodeByAryan.

### Modules

- [All modules](https://module.codebyaryan.com/magazine-makers-modules-hub?hsLang=en)
- [Advanced Pricing Table](https://module.codebyaryan.com/magazine-makers-advanced-pricing-table?hsLang=en)
- [Premium Pricing Table](https://module.codebyaryan.com/magazine-makers-premium-pricing-table?hsLang=en)
- [Comparison Pricing Table](https://module.codebyaryan.com/magazine-makers-comparison-pricing-table?hsLang=en)
- [Documentation](https://module.codebyaryan.com/magazine-makers-documentation?hsLang=en)

### Legal

- [Privacy Policy](https://module.codebyaryan.com/magazine-makers-privacy-policy?hsLang=en)
- [Terms of Service](https://module.codebyaryan.com/magazine-makers-terms-of-service?hsLang=en)
- [Customer Support](https://module.codebyaryan.com/magazine-makers-customer-support?hsLang=en)

### Contact

- Email [aryanantal2301@gmail.com](mailto:aryanantal2301@gmail.com)
- Portfolio [codebyaryan.com](https://www.codebyaryan.com/)
- Response time Within 2 business days

© 2026 Magazine Makers · CodeByAryan. HubSpot CMS Modules.