Before-and-after slider widgets enable you to visually represent key differences in a service or a place after making a change or changes after using a specific product. You can use image comparisons on your business website to prove your services by presenting previous works, making it an effective way to emphasize social proof.
But how would you add an HTML before and after slider to a website?
To do this, you’d need to use a widget or plugin that allows you to create before-and-after photo sliders that can be embedded on your site.
In this article, you will find six best before-after slider widgets for websites to use for free.
Why should you use before after slider widgets?
- Boost sales: Use convincing images to address potential customers’ inner eagerness and showcase how your product can help them achieve their desires.
- Prove your offers are good value for money: Showcase how your products/services could make an obvious, impactful, and significant change to their bottom line.
- Increase engagement level: Like Calculators on a website help increase engagement and conversions, so does a before and after widget on a website.
Where can you use before and after siders?
- Your online shopping pages: Do you sell physical products? Highlight how your product could impact the user’s life with and without using it with an image comparison slider.
- Your service pages: Be a construction work, fashion, decoration gig, photo editing service, SEO gig, or any kind of digital work, utilize before and after photo slider widgets with captions to emphasize how your services are better after previous clients used them.
- Use as a substitute for testimonial sliders: Suppose you run a digital marketing agency. In that case, in addition to displaying customer testimonials on a website, you can use a before-and-after HTML widget to showcase ROI and growth reports previous (or existing) customers achieved after using your services. You can use trusted image sources such as Google Analytics, Google Search Console, Shopify, Stripe, Semrush, and Ahrefs.
Top 5 things to consider when using a before and after slider on a website
- Utilize the correct image dimensions: A before-and-after photo slider requires two images of equal size. Make sure both are correct dimension-wise and image-ratio-wise and cropped to fit the widget’s size. You may want to use an aspect ratio calculator like this to create images appropriate for the slider.
- Compress images: To reduce file sizes, optimize using an image compressor such as ShortPixel or TinyPNG and modern image file formats such as AVIF or WebP.
- Minimize the impact on page speed: Most before and after slider generators come with an external JavaScript that will probably load external assets such as fonts and icons dynamically. So, without loading them prominently, you can use the defer or async parameters to load the script while minimizing the impact on page loading time. To optimize tags, use a script manager such as Google Tag Manager or Zaraz by Cloudflare. Also, load the script only where the widget is placed.
- Utilize captions: The description or the caption section allows you to describe the image comparison and link to relevant pages.
- Split test: Use different image combinations, widget placements, captions, dividers, image ratios, divider directions, and so on to identify the top performers of before and after image sliders.
6 Best Before and After Image Slider Widgets for Your Website
Elfsight’s Before and After Slider
Elfsight is one of the most popular services that provides 90+ high-quality HTML widgets for websites. Some of them are Instagram Feed, YouTube Video Gallery, Google Maps, Background Audio Player for websites, and Amazon Reviews apps. The service features a visual, no-code widget builder, thousands of templates across all widgets, projects to manage brands/websites, and sharing widget functionality.
Elfsight’s Before and After Slider has many features and customization options. It is independent of the website platform, so you can embed it on any site, whether it’s an eCommerce product page, a digital product sales page, or an HTML landing page.
Key features
- Unlimited image comparisons: Elfsight Before and After slider is not limited to only one comparison. It allows you to add unlimited image comparisons—a better option for creating a portfolio.
- Two layouts: Organize the image comparison widget as per your requirements.
- Carousel layout with pagination – It arranges all the slides into one gallery with pagination arrows that are used for navigating between the images.
- List layout – As visitors scroll down the page, they see more and more photo comparisons.
- Captions: This lets you add a small description under the image comparison.
- Image ratios and adaptable widget width: Elfsight’s Image Comparison slider supports seven image ratios: 1:1 Square, 3:2 Standard, 2:3 Standard (Vertical), 4:3 Four-Three, 3:4 Four-Three (Vertical), 16:9 Widescreen, and 9:16 Widescreen (Vertical). You can specify a maximum widget width to fulfill your web page design requirements.
- Divider options: This section includes items to set the initial divider line’s position and size, change its colors, and display arrows.
- Interaction behavior
- Drag & Click – The user will have to click and hold on the divider and move it in a direction
- Hover – The divider will automatically move where the mouse is moving
- Customization options: You can change font size, colors, and font weight of the heading, caption, labels, and controls.
- You can make the widget transparent, use a custom background color or upload an image, enable/disable full-screen mode, change the direction of the divider, add custom CSS and JavaScript codes, and more.
How to create a Before and After image slider
Design your before/after slider widget by using the builder below. Choose a template (and click on the “Continue with this template” button), add your image sets, customize the widget, and get the embed code by clicking on the “Add to Website” button.
Or, you can sign up on Elfsight, search for the ‘Before and After’ app from the app catalog, customize it, and get the HTML embed code for the before-and-after slider.
Video
Watch the video below to learn how to create a before-and-after slider widget on Elfsight and add it to your website.
Display on your site
Copy and paste the HTML snippet code where you want to show the before and after picture slider widget.
Demo
Pricing
Elfsight’s Before and After slider widget is free to use, but it includes the Elfsight logo and has some limitations.
Its paid plans start at $5 per month.
- Basic – $5/mo – Unlimited websites, 5,000 views, 3 widgets, Elfsight logo removal
- Pro – $10/mo – Unlimited websites, 50,000 views, 9 widgets, Elfsight logo removal
- Premium – $20/mo – Unlimited websites, 150,000 views, 21 widgets, Elfsight logo removal
All Packs plans give you access to all apps, including the Before And After Slider widget. Compare Elfsight price options to find the best plan for you.
Click here to try Elfsight Before and After Slider.
Common Ninja’s Before & After Slider
Common Ninja is another HTML widget generator for websites. Its library includes over 200 widgets, including the Video Slider, Product Blobs, Notification Bar, Brackets and tournaments, and WhatsApp Chat widget. Like Elfsight, Common Ninja provides projects (to manage your brands and websites), a visual editor, templates, and vast customization options, including custom CSS and JavaScript.
The Before & After Slider Widget of Common Ninja enables you to design a beautiful, responsive image comparison table with many customization options.
Key features
- Multiple Sliders: Showcase multiple photo comparisons. And move photo sets effortlessly.
- WYSIWYG editor: Like Elfsight, Common Ninja provides an intuitive visual editor to display your changes in real time.
- File manager: Upload images from your computer or link and manage them more easily
- Label settings: Customize labels by changing names for before and after, offset position, colors, and height, and control the visibility (always show, on mouse over, and hide).
- Slider dimensions: Choose one of nine available image ratios and adjust the widget size.
- Customization options – Change divider style (default or angled) and type (six types), font type (over 20 web-friendly font types), background, add custom CSS, and more.
- Add before and after slides to emails: This unique feature on Common Ninja lets you generate embed code optimized for emails.
Watch the video below to learn how to create a before and after slider widget for your websites using Common Ninja.
Demo
Pricing
The Before and After slider app of Common Ninja is free to use, but the free version has certain limitations.
- Free – $0 – 300 monthly pageviews, 1 widget, 1 project
- Essentials – $10/mo – Unlimited projects & monthly pageviews, remove branding from widgets, advanced styles, 1 collaborator
- Pro – $16/mo – Unlimited projects & monthly pageviews, remove branding from widgets, custom styles, 3 collaborators, integrations, AI enhancer
- Ultimate – $26/mo – Unlimited projects & monthly pageviews, remove branding from widgets, custom styles, 5 collaborators, integrations, AI enhancer, multi-language widgets. API access, custom CSS
Click here to try Common Ninja’s Before & After slider app.
Fouita’s Before/After Image Widget
Fouita is an alternative to Common Ninja with many widgets. It offers several widget generators in the image category: Slider, Logo Showcase, Image Hotspot, Product Image 3600, and Image Gallery widget.
Fouita’s Before/After widget is another one in the Image category. It enables you to create a comparison widget using images.
Features:
- Templates: There are several templates that you can edit.
- Customize widget: Fouita doesn’t have many editing tools compared to others. However, you can upload images for before and after situations, add custom captions, set maximum height, and change appearance.
- Display conditions and triggers: Fouita has advanced targeting options that allow you to dictate when and how to display your widgets. For example, you can schedule your before/after image slider and show it based on the visitor’s location, widget installed page, URL parameter, time on page, etc.
Demo
Pricing
Fouita’s Before/After Image Slider is free to use with certain limits. Paid plans are flexible, as you can see below screenshot:
Ultimate Before After Image Slider & Gallery plugin
BEAF – Ultimate Before After Image Slider & Gallery plugin by Themefic is a robust previous and next slider plugin for WordPress.
Key features
- Create unlimited image galleries and Then and Now sliders
- Horizontal or Vertical layout
- Widget support – Show slider widget on the sidebar
- Page builder support – Use the BEAF slider on WordPress page builders such as Elementor, Brizy, Beaver Builder, and Divi.
- Create multi-column Before After Galleries with or without filtering options.
- Add titles, ALT tags, descriptions & Read More button
Click here to download the BEAF slider plugin.
Twenty20 Image Before-After
Twenty20 Image Before-After is another WordPress plugin that lets you create before and after image sliders for free.
Key features
- Create unlimited before-after sliders and add multiple slider widgets into one post or page
- Add before-after on widgets.
- Support popular page builders such as Elementor and WP Bakery Visual Composer.
- Shortcode parameters to customize before and after slider widgets uniquely
- Support WP Image alt as image alt and title
Click here to download the plugin.
CodePen
CodePen is an online hub where coders share their works. In CodePen.io, you can find a variety of works, such as subscription forms, navigation bars, HTML/CSS buttons, sliders, and landing page templates. Those works are called “pens” in CodePen. You can edit a publicly available “pen” and customize it.
You can use several Before/After image slider pens in CodePen on your projects.
Demos
Before/After image slider
See the Pen Before/After image slider (Feat. Beth Harmon) by joseph (@josephwong2004) on CodePen.
Responsive Vanilla JS Before & After Slider
See the Pen Responsive Vanilla JS Before & After Slider by Craig Harrison (@pig3onkick3r) on CodePen.
Click here to check out CodePen.
Final words on top HTML before and after slider widgets
One of the better ways to visually demonstrate results before and after a situation or use of an item is by using a before-and-after slider on your site.
In this article, you found six free resources to create a responsive image comparison slider for your marketing campaigns. Two of them are WordPress plugins that can be very useful if you do not want to use external scripts on your site that might impact page loading speed.
However, services like Elfsight and Common Ninja provide intuitive builders that allow you to design sliders based on your requirements. You can set the widget’s width and background color, add multiple image sets, captions, and more. The best part is that you can embed them on any website regardless of the platform (e.g., WordPress, Webflow, Wix, Shopify, Squarespace).
So, which is your favorite before-after slider generator?