Webflow Before and After Slider Widget: Compare Images on Your Webflow Site

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

Design studios, agencies, photographers, architects and interior designers build on Webflow because the site itself shows their eye for detail. A before-and-after slider does the same for the work: a redesigned website, a retouched photo, a renovated room. Visitors drag the divider to compare the two images. Build the slider here, then place it in any section with a Code Embed element, sized to your layout.

How to add a Before & After Slider widget to Webflow

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 images. Add labels and captions, and add more sets for more projects.
  3. Pick a layout: List shows the comparisons one after another, Carousel lets visitors move through them. Set the width in px or % to fit your grid.
  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 to match your site.
  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 Webflow site

  1. Open the page in the Webflow Designer and pick the section or container where the comparison should sit.
  2. Open the Add panel and drag a Code Embed element into it.
  3. Paste the slider code and click Save & Close.
  4. The canvas only shows an empty embed, because scripts don’t render inside the Designer. Publish the site or open Preview to see the slider.
  5. Drag the divider on the live page, then check the layout on a tablet and a phone.

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

  • On case study pages: the old website or brand next to your redesign.
  • On a photographer’s or retoucher’s portfolio, using the Retouch Slider template for edits.
  • On architecture and interior project pages: a room or building before and after the work.
  • On a product landing page, using the Product comparison template to show what the product does.

Do you need a paid Webflow plan?

Yes. Webflow only runs the Code Embed element and custom code on a paid site plan or workspace plan, so a free Webflow project won’t show the slider. The widget has its own free plan: one widget with up to 200 views a month on unlimited websites, with a small Elfsight link. Paid widget plans start at $5 a month, billed yearly.

The slider sits inside the page, so you don’t need site-wide custom code for it. Set its width in px or % in the widget’s layout settings, or let it fill the container you drop it into. Since the Designer won’t show it, check the result in Preview or on the published site at each screen size.

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 paid Webflow plan for the before and after slider?

Yes. The Code Embed element needs a paid Webflow site plan or workspace plan. On a free project, Webflow won’t run the slider script.

Why can’t I see the slider in the Webflow Designer?

Webflow doesn’t run scripts inside the Designer canvas. Publish the site or open Preview to see it. If it’s still missing, check that the code is in a Code Embed element and that your plan allows custom code.

How do I make the slider fit my Webflow layout?

Set the width in px or % in the widget’s layout settings, and place the Code Embed inside the container you want it to follow. Choose an image ratio that matches your photos so nothing gets cropped awkwardly.

Can I show several projects in one slider?

Yes. Add a comparison set for each project and choose the List or Carousel layout. They all stay in one widget and one Code Embed.

Can I change the images later?

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

More Webflow widgets

Scroll to Top