Wix Before and After Slider Widget: Compare Photos on Your Wix Site

Use the builder below to create a free before and after slider for your Wix website. Pick a template, click “Continue with this template” and upload your photos.

For salons, cleaners, landscapers, renovators, photographers and other local services, a before-and-after photo shows the result better than any description. This slider puts both photos in one frame with a divider that visitors drag to compare. Build it here, then add it to any Wix page with an Embed HTML element. You don’t need an app from the Wix App Market.

How to add a Before & After Slider widget to Wix

1. Create your widget

  1. Choose a template: Simple comparison, Retouch Slider, List of Works or Product comparison. All of them are responsive.
  2. Add your comparison sets: click “Add Set” and upload the before and after photos. Add labels and captions, and add a set for every job you want to show.
  3. Pick a layout: List shows the comparisons one after another, Carousel lets visitors move through them. Set the width in px or %.
  4. Adjust the settings: image ratio, slider direction, label position, divider, interaction behavior and full-screen mode. Then style the background, labels, captions and controls.
  5. Save it: click “Add to website for free“, sign up on the next page and copy your embed code.
Before & After Slider widget builder with templates

2. Add it to your Wix site

  1. Open your site in the Wix Editor and go to the page where the slider should appear.
  2. Click Add Elements (+), then Embed Code › Popular Embeds › Embed HTML. In Wix Studio the element is called Embed code.
  3. Click Enter Code, make sure Code is selected, paste the slider code and click Update.
  4. Drag the corners of the box until the whole slider is visible, including labels and captions. A List layout with several sets needs a tall box; a Carousel usually needs less height.
  5. Switch to the mobile editor and resize the box there too. Wix embed boxes don’t resize on their own, so the mobile view needs its own size.
  6. Publish your site, then drag the divider on the live page and on your phone to check it.

Where to put the Before & After Slider widget on your Wix site

  • On your homepage, with your best transformation near the top.
  • On each service page: a cut and color on a salon’s page, a cleaned carpet on a cleaner’s, a new garden on a landscaper’s.
  • On a Gallery or Our Work page, using the List of Works template or a carousel of several jobs.
  • On a pricing or booking page, next to the booking button, so people see the result they’re paying for.

Do you need a paid Wix plan?

No. The Embed HTML element works on Wix’s free and premium plans, so the slider can go on any page. Wix runs embedded code inside its own frame, which suits a self-contained widget like this one. Just remember that Embed HTML boxes aren’t responsive: set the size in the desktop editor and again in the mobile editor.

The widget’s own free plan covers one widget with up to 200 views a month on unlimited websites, with a small Elfsight link. One widget can hold several comparison sets, so a single slider can show a whole portfolio of jobs. Paid widget plans start at $5 a month, billed yearly.

Before & After Slider widget features

  • Four responsive templates: Simple comparison, Retouch Slider, List of Works and Product comparison.
  • Multiple comparison sets, each with labels and captions.
  • List or Carousel layout, with the width set in px or %.
  • Slider settings: image ratio, slider direction, label position, divider and interaction behavior.
  • Full-screen mode, appearance controls, and custom CSS and JavaScript fields.

Frequently asked questions

Do I need a Wix premium plan for the before and after slider?

No. The Embed HTML element works on free Wix sites as well as premium ones, so you can add the slider to any page.

Why is my before and after slider cut off on Wix?

The Embed HTML box is too small. Click the element in the Wix Editor and drag its corners until the photos, labels and captions fit, then publish again.

Why does the slider look wrong on mobile?

Wix embed boxes don’t resize on their own. Open the mobile editor, select the embed and resize it there so the slider fits a phone screen.

Can I show several before and after photos on Wix?

Yes. Add a comparison set for each pair of photos and choose the List or Carousel layout. They all stay in one widget and one embed box.

Can I change the photos after adding the slider to Wix?

Yes. Edit the widget in your Elfsight dashboard and save. The slider on your Wix site updates on its own, so you don’t need to paste the code again.

More Wix widgets

Scroll to Top