Magazine Makers
Premium Marketplace Module

Premium Before / After Slider

Advanced comparison suite - up to 6 sliders per section, hotspot markers, scroll animations, video before/after, full-width and custom size controls, configurable auto-sweep timing, grid layouts, and premium label and handle styles.

  • Up to 6 Sliders
  • Hotspot Markers
  • Full Width
  • Custom Size
  • Sweep Timing
  • Video Comparison
  • Grid Layouts
  • Fully Responsive
Variation 01

Multiple Sliders with Hotspots

Two stacked comparisons with annotated hotspot markers and scroll fade animations.

Multi-slider Hotspot markers Video compare Scroll animations

Project transformations

Multiple before-and-after comparisons with hotspot annotations - hover markers to learn about each change.

Living room renovation

Living room before Before
Living room after
After

Kitchen remodel

Kitchen before Before
Kitchen after
After
Variation 02

Two-Column Grid Layout

Side-by-side comparisons in a responsive 2-column grid - stacks on mobile.

Multi-slider Hotspot markers Video compare Scroll animations

Skincare results gallery

Compare multiple treatment areas in a compact grid layout.

Forehead - 8 weeks

Forehead before Week 0
Forehead after Week 8

Cheek area - 8 weeks

Cheek before Week 0
Cheek after Week 8
Variation 03

Corner Ribbon Labels - Photo Editing

Corner label style with minimal handle for a clean photo editing portfolio look.

Multi-slider Hotspot markers Video compare Scroll animations

Retouching portfolio

Professional color grading and retouching - drag to compare raw and final exports.

Landscape - Colorado Rockies

Raw landscape RAW
Edited landscape
FINAL
Variation 04

Dark Theme - Vertical Slider

Vertical comparison on dark background for agency and design studio case studies.

Multi-slider Hotspot markers Video compare Scroll animations

UI design evolution

From wireframe to polished interface - drag vertically to explore the transformation.

Dashboard redesign

Wireframe Wireframe
Final UI Final UI
Variation 05

Three-Column Grid - AI Enhancements

Three AI image comparisons in a responsive grid for generative AI tool landing pages.

Multi-slider Hotspot markers Video compare Scroll animations

AI-powered image enhancement

Upscale, denoise, and restore - see results across different image types.

Portrait

Low res portrait Input
Enhanced portrait Output

Architecture

Blurry architecture Input
Sharp architecture Output

Product

Noisy product photo Input
Clean product photo Output
Variation 06

Video Comparison - Premium Only

Compare before and after video clips with synced playback - drag the slider to reveal the graded export.

Multi-slider Hotspot markers Video compare Scroll animations

Color grading reel

Premium-only video mode - compare raw footage with the final color-graded export. Videos stay synced as you drag.

Cinematic grade - before & after

Raw clip
Graded
Variation 07

Full Width, Custom Size & Indicator Timing

Edge-to-edge full-width module, custom 920×480 frame, and a 1.4s initial Before/After indicator animation so visitors clearly see they can drag.

Full width Custom 920×480 1.4s indicator Drag hint

Full-bleed renovation reveal

Full Width for edge-to-edge layouts, custom pixel width/height for exact design sizing, and configurable initial indicator animation timing so visitors understand the slider is draggable.

Exterior makeover - timed reveal

House exterior before Before
House exterior after
After