Before-and-after slider widgets enable you to visually represent key differences in service or 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?
For that, you’d have to use a widget or plugin that lets you create before/after photo sliders that can be embedded on your site.
In this article, you will find 5 best before-after slider widgets for websites to use for free.
Why should you use before after slider widgets?
- Boost sales – Address the inner eagerness of potential customers by showcasing how using your product can get them what they desire with convincing images.
- 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 FAQ widgets on a website help increase engagement, 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 will impact the user’s life with and without using it with a before and after image slider.
- Your service pages – Be a construction work, decoration gig, photo editing service, online ads campaign management, SEO gigs, 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, apart from embedding Google reviews 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 right image dimensions – In a before and after photo slider, you have to use two images of equal size. Make sure both of them are correct dimension-wise & image-ratio-wise and cropped to adjust to the right size of the widget. You may want to use an aspect ratio calculator like this to make images appropriate for the before and after graphic slider.
- Compress images – Reduce file sizes by optimizing using an image compressor such as ShortPixel, or TinyPNG.
- Minimize the impact on page speed – Most of these 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 – Text 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 so on, and identify the highest performer to achieve a better yield from a before and after image slider.
5 Best Before and After Image Slider Widgets for Your Website
Elfsight Before and After Slider
Elfsight is one of the most popular services that provide 80+ different high-quality HTML widgets for websites. Instagram Feed, YouTube Gallery, Google Maps, Popup, and Amazon Reviews apps are some of them. It features features such as visual, no-code widget builder, templates, projects to manage brands/websites, and sharing widgets.
Elfsight’s Before And After Slider is filled with many features and customization options. It is independent of the website platform, so you can embed it on any site, be it the Squarespace website, Clickfunnels 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 – 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 before and after photos.
- Captions – Add a small text beneath the image comparison and add links, create ordered & unordered lists so on.
- Image ratios and adaptable widget width – Elfsight’s Image Comparision 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, 9:16 Widescreen (Vertical). Specify a maximum widget width to fulfill requirements on your web page design.
- Divider options – Set the initial divider line’s position, and size, change 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 – Change font size, colors, font weight of heading, caption, labels, and controls.
- 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.
Create a Before and After image slider
Design your 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 see how to make 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.
Note: You need to place the Javascript once, even if you have multiple Elfsight widgets on a page.
Demo
Pricing
Elfsight’s Before and After slider widget is free to use. But it includes the Elfsight logo and can only be shown for a very limited view count.
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.
CommonNinja Before & After Slider Widget
CommonNinja is another HTML widgets provider for websites with over 170 plugins in its library. Some of them are the Pricing table maker, Product Blobs, Notification Bar, Brackets & Tournaments, and Event Lists Calendar widgets. Like Elfsight, CommonNinja provides projects (to manage your brands and websites), visual editor, templates, and vast cusomization options including custom CSS and JavaScript.
Before & After Slider Widget by CommonNinja lets you design a beautiful and responsive image comparison table with many customization options.
Key features
- Multiple Sliders – Showcase multiple photo comparisons. And move photo sets easily.
- WYSIWYG editor – Like Elfsight, CommonNinja provides an intuitive visual editor where changes you make will be displayed in real-time.
- File manager – Upload images from your computer or link and manage them more easily
- Label settings – Customize labels by changing label 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.
- Analytics – Get stats on widget views, clicks, etc.,
Watch the video below to learn how to generate a before-and-after HTML slider widget for your website in CommonNinja.
Demo
Pricing
It is free to use the Before and After slider app of CommonNinja. However, the free version comes with certain limits.
- 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 CommonNinja’s Before & After slider app.
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
- Add titles, 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, buttons, timers that count up, sliders, and landing page templates. Those works are called “pens” in CodePen. You can edit a publicly available “pen” and customize it as you need.
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 five free resources to create a responsive image comparison slider for your site. 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 such as Elfsight and CommonNinja provide intuitive builders to design sliders based on your requirements: Set the widget’s width and background color, add multiple image sets, captions, and more. The best part is you can embed them on any site without limiting them to the platform.
So, which tool do you use to make a before-after slider for websites?