Like using a customer testimonials slider widget on your site helps in many ways to your business, so does a before and after slider widget.
Before and after slider widgets allow you to represent key differences of a service, place, or product after making a change visually.
But how would you add an HTML before and after slider to a website?
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 on 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 40+ different high-quality HTML widgets for websites. Instagram Feed, YouTube Gallery, Google Maps, Popup, and Amazon Reviews apps are some of them.
ElfSight 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 more.
Create a Before and After image slider
Design your widget by creating your free account from here.
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.
Video
Watch the video below to see how to make a before and after slider widget on ElfSight.
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, 1 widget, Elfsight logo removal
- Pro – $10/mo – Unlimited websites, 50,000 views per widget, 3 widgets, Elfsight logo removal
- Premium – $20/mo – Unlimited websites, Unlimited views, 9 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 50 plugins in its library. Pricing table maker, Product Blobs, Notification Bar, Brackets & Tournaments, and Event Lists Calendar widgets are some of them.
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 made by you will be displayed in real-time.
- File manager – Upload images from your computer or link and manage them easier
- 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 find out 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 impressions, 2 widgets, 1 slider per widget
- Basic – $4.5/mo – 2,000 impressions, 5 widgets, 3 sliders per widget
- Pro – $7.99/mo – 50,000 impressions, 30 widgets, 10 sliders per widget
- Business – $15.99/mo – 3,000,000 impressions, 100 widgets, 50 sliders per widget
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. And the best part is you can embed them on any site without limiting it to the platform.
So, which tool do you use to make a before-after slider for websites?