Before and After Slider for Webflow

Compare before-and-after visual changes on your Webflow website to show transformations, illustrate progress, and present clear, impactful results.
4.8 rating
10,000+ reviews
Free plan available
Create Widget for Free
No credit card needed
Before and After Slider for Webflow

Create your Before and After Slider widget

Configure your Before and After Slider and add it to your Webflow website for free!

Screenshots

Before and After Slider for Webflow
1 / 6

Embed Before and After Slider on Webflow with the Elfsight widget

Before and After Slider by Elfsight allows you publish astonishing selling images for your website. Users can see at once all the alterations that your products or services introduce. Just upload two pictures to Before and After Slider for Webflow and they will be demonstrated with a divider that is movable to watch the difference. You can create unlimited slides, and add captions and labels. The divider orientation offers two options: horizontal or vertical, and you can choose the best picture ratio. Your visitors will not escape making a purchase, when they find out the actual result| of your products!

Insert before & after slider to take your e-commerce goals quicker!

Below are basic features of the widget:

  • Shape unlimited Before and After couples of pictures
  • Add captions with text formatting options to each slide
  • Two layouts: List and Carousel
  • Horizontal or vertical orientation of the divider
  • Click and drag or simply hover to move the divider
  • Swipe on touch screen devices

Just try out this demo to understand the functionality of the widget

How to embed Before and After Slider into my Webflow website?

Simply take several steps presented below to integrate the tool.

  1. Employ our free editor and start building your custom-made plugin.
    Determine the preferable form and aspects of the widget and save the modifications.
  2. Get your unique code revealed in the box on Elfsight Apps
    As soon as the generation of your personal tool is finished, copy the exclusive code from the emerged box and keep it for later usage.
  3. Initiate utilization of the plugin on Webflow website
    Add the code saved before in your homepage and save the corrections.
  4. You’re done! The setup is fully accomplished
    Visit your web page to check the performance of the tool.

On condition of experiencing questions or run against some difficulties, please write to our customer service staff. Our people are eager to help you with all the difficulties you may have on the plugin.

Do I need a paid Webflow plan to add the Before and After Slider?

Yes, Webflow requires a paid plan to publish custom code. Free plans do not allow JavaScript embeds on live websites.

Can I embed Before and After Slider on Webflow CMS templates?

Yes, you can insert the slider into a CMS Collection template, and it will automatically appear across all dynamic pages using that layout.

Does the slider support vertical and horizontal comparison modes?

Yes, you can select either a vertical or horizontal divider direction, depending on how you prefer to showcase the visual comparison on your Webflow page.

How do users control the divider in Webflow?

Visitors can interact with the comparison bar using drag-and-click functionality or enable hover mode, where the divider moves with cursor movement.

Can I include clickable links in image captions?

Yes, captions allow hyperlinks, so you can guide Webflow visitors to related services, case studies, or product pages directly from the slider.

Is it possible to define the starting divider position?

In the Elfsight editor, you can preset the initial split point, determining how much of the “before” and “after” images is visible when the slider first loads.

Which image formats are recommended for Webflow?

Optimized JPG or PNG files are recommended. Following these image guidelines helps ensure fast loading and smooth performance.

Can I use the slider for mockups or design comparisons?

Absolutely. Elfsight works with any two visuals, including mockups, renders, UI updates, product transformations, or creative revisions.

Can I display more than two images at once on my Webflow page

Each slide compares a pair of images. To demonstrate multiple stages, you can add several slides in sequence.

Can the divider be fixed in one position?

The widget is built for interactive comparisons, so the divider remains adjustable and cannot be permanently locked.

Pricing

14-day money back guarantee. Risk-free, you can cancel at anytime.
Elfsight Apps
Multi-platform software that suits any website
from $0 / month
start with free plan
Unlimited number of websites
Professional support
Free of charge installation service
Special offer for multiple apps
Fully customizable