Back to Blog

How to Add a Before and After Image Slider in WordPress (Free Block)

Add a draggable before/after image comparison to WordPress with a free block — image prep, labels, use cases and when you need vertical comparisons.

To add a before and after image slider in WordPress, install the free SlideVerse plugin, insert the Before After Image Comparison block and choose the two images. Visitors drag the divider to reveal the change. Use identical framing and dimensions so the comparison is honest; vertical comparisons are part of SlideVerse Pro.

Why it works

A before/after slider lets visitors check the result for themselves. Dragging the divider is more convincing — and more memorable — than two photos side by side.

Prepare the images

RuleWhy
Same dimensionsThe divider lines up exactly
Same camera position and angleVisitors compare the change, not the framing
Same lighting where you canOtherwise the "after" looks better just because it's brighter
Unedited "before"An honest baseline builds trust
Alt text on bothDescribe each state: "Kitchen before renovation"

Add the block

  1. Install and activate SlideVerse.
  2. Insert Before After Image Comparison.
  3. Choose the before and after images.
  4. Adjust the settings in the sidebar and the look in the Style tab.
  5. Add a heading and a one-line caption explaining what changed.
  6. Publish and test on a phone.

Use cases

  • Renovation and interior design — rooms, kitchens, facades.
  • Landscaping — gardens and outdoor spaces.
  • Photo editing and retouching — portfolios.
  • Cleaning, detailing and restoration — cars, carpets, furniture.
  • Dental and cosmetic clinics — with patient consent.
  • Website redesigns — old site vs new.

Show several comparisons on one page by adding one block per project, or put them inside a Flexi Content Slider so visitors swipe between projects.

Free vs Pro vs alternatives

SlideVerse (free)SlideVerse ProGutSlider (free / Pro)
Left/right image comparisonYesYesYes
Top/bottom (vertical) comparison—Yes—
Drag, fade or toggle modesDragDragYes
Several designs——Yes, more in Pro
Video comparison——Pro
Eight other slider types in the same pluginYesYesFour other blocks free

Source: GutSlider, as of October 25, 2026. Disclosure: WPXERO makes SlideVerse (version 0.2.2).

SlideVerse Pro starts at $19.99 a year and also adds a lightbox, 3D transitions, a WooCommerce Product Slider and templates.

More SlideVerse guides: an image slider, a post carousel and a testimonial slider. See all options in our block editor slider round-up.

Common Questions

Install the free SlideVerse plugin, insert the Before After Image Comparison block, and choose the before and after images. Visitors drag the divider to compare them. No shortcode or page builder is needed.

Yes. Use the same dimensions and the same framing, ideally shot from the same position, so the only difference visitors see is the change you're showing.

A vertical (top/bottom) before/after comparison is part of SlideVerse Pro. The free block compares left and right with a draggable divider.

Yes. Visitors drag the divider with a finger, and the block adapts to the screen width.

Not with SlideVerse. GutSlider Pro offers synced before/after video comparisons if you need that.

Renovations and interiors, landscaping, photo editing and retouching, cleaning and detailing services, cosmetic and dental work, and website redesigns — anywhere the result is visual.

Get new guides and releases by email

Occasional emails when we publish a guide or ship a notable plugin update. No spam — unsubscribe any time.

We only use your email to send these updates. See our privacy policy.