Parallax Image Slide is a premium before-and-after image comparison component with built-in parallax depth, spring physics, and three orientation modes. Use it to showcase renovations, design transformations, retouching work, product upgrades, or any visual comparison. Supports drag and hover interactions, six handle designs, and a unique diagonal split mode.
Three orientation modes — horizontal, vertical, and diagonal — with adjustable diagonal angle and an optional fit-to-bounds toggle
Built-in parallax effect that creates convincing depth as the divider moves across both images
Physics-based drag interaction with configurable friction, bounce, stiffness, and damping for a tactile, responsive feel
Six handle designs (Arrows, Grip, Diamond, Minimal, Line, None) and three divider styles (Sharp, Glow, None) for complete visual control
Edge tension effect that adds elastic resistance at the slider boundaries
Responsive image support with independent position controls for each image
Before Image
After Image
Start Position
Orientation (Horizontal, Vertical, Diagonal)
Interaction (Drag, Hover)
Divider Style (Sharp, Glow, None)
Handle Design (Arrows, Grip, Diamond, Minimal, Line, None)
Diagonal Angle (visible for Diagonal orientation)
Fit to Bounds (visible for Diagonal orientation)
Friction
Bounce
Stiffness
Damping
Handle
Handle Glow
Handle Border
Divider
Label BG
Label Text
Parallax toggle and depth
Edge Tension toggle and amount
Border Radius
Handle Size
Divider Width
Show Labels toggle
Before Text
After Text
Label Position (Top, Bottom)
Show Progress toggle
Label Font
Hint Font
Show Hint toggle
Hint Text
Portfolio sites showcasing design, retouching, or illustration work side by side
Real estate and renovation pages comparing before-and-after property photos
Product landing pages highlighting feature upgrades or visual improvements
Case studies and agency decks demonstrating measurable transformation results
Ship interactive image comparisons in seconds — just drop, configure, and publish.
Aidan Looker
