Before and After Slider Widget

Before and After Slider Widget Features for Websites

Show visual transformations with interactive before-and-after image comparisons. Add image pairs, labels, captions, reveal controls, carousel navigation, fullscreen viewing, and custom styling without code.

Create Your Before and After Slider Widget - It's Free!
Before and After Slider Widget Features for Websites Hero Bg Image

How to embed your Before and After Slider into WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Learn more

Compare Before and After Images

Place two related images in one interactive frame so visitors can quickly understand a transformation. Add before and after image URLs, write clear labels, and include captions for renovation, beauty, repair, design, or product comparison pages.

Image controls include:

Before image URLAfter image URLBefore labelAfter labelCaption text
Add Image Pairs
Compare Before and After Images

Control the Reveal Experience

Choose how visitors explore each comparison. Set a horizontal or vertical divider, adjust the starting reveal position, and let visitors compare images with drag, click, or hover interaction depending on your page experience.

Reveal controls include:

Horizontal revealVertical revealInitial positionDrag or clickHover interaction
Customize Reveal
Control the Reveal Experience

Show Multiple Transformations

Create a small comparison gallery when one image pair is not enough. Add up to three before-and-after pairs and enable carousel navigation so visitors can browse project stages, case studies, edits, or service results.

Gallery options include:

Up to 3 pairsCarousel navigationProject stagesCase studies
Build a Gallery
Show Multiple Transformations

Match Sliders to Your Website

Style the comparison widget so it fits naturally into your page. Adjust width, image ratio, corner radius, divider size, colors, labels, captions, fullscreen mode, mobile visibility, and custom CSS.

Style controls include:

Widget widthImage ratioDivider styleFullscreen modeCustom CSS
Style Your Slider
Match Sliders to Your Website