Best WordPress Before and After Slider Plugins in 2026: 6 Options Compared

Sometimes a photograph doesn't tell the whole story. Whether you're showing the results of a renovation, a photography edit, a beauty treatment or a website redesign, visitors need to be able to see exactly what has changed.

A before and after slider makes this possible by placing two images together and allowing visitors to move a divider between them. Instead of simply looking at two separate pictures, visitors can interact with the comparison and reveal the transformation for themselves.

WordPress has several plugins that make it possible to add this functionality without writing code. Some offer a simple image comparison, while others include galleries, custom styling, video comparisons and additional interactive effects.

In this guide, I'll compare six WordPress before and after slider plugins, looking at their features, strengths and limitations to help you choose the right option for your website.

A note about this comparison: I develop Conobe Before & After Slider, which is one of the plugins included below. I've included it alongside other available options and aimed to provide a balanced overview of what each plugin offers, rather than suggesting there is one solution that suits every website.

Quick Comparison: The Best WordPress Before and After Slider Plugins

Here is a quick overview of the six plugins covered in this guide. They all provide ways to compare images, but their approach, integrations and additional features vary.

Pricing and feature availability can change. Some plugins also offer additional features through paid upgrades or separate add-ons, so check each developer's current documentation before making a decision.

1. Conobe Before & After Slider

Best for: Website owners who want a flexible before and after slider with image, video and gallery features.

Conobe Before & After Slider is a WordPress plugin I developed to make creating interactive image comparisons straightforward. The idea was to provide a visual editor where you can upload your media, customise the comparison and generate a shortcode without having to build the slider yourself.

The free version provides a substantial set of tools for creating responsive image comparisons, including horizontal and vertical sliders, custom labels, hover movement, adjustable starting positions and styling controls.

The Pro version builds on that foundation with more advanced functionality. This includes synchronised video comparisons, embedded video sources, grouped galleries, filterable collections, automatic animation, scroll-controlled reveals and custom watermarks.

It is designed for more than a single before and after image on a page. If you have several projects or transformations to showcase, the grouping and gallery features can help organise them into a more complete presentation.

Key Features

• Interactive before and after image comparisons.
• Horizontal and vertical slider orientations.
• Mouse hover and click-to-reveal interaction.
• Custom before and after labels and positioning.
• Adjustable starting position, dimensions and aspect ratios.
• Customisable divider, handle, colours, radius and shadows.
• Visual slider generator with automatic shortcode creation.
• WordPress Media Library integration.
• Responsive and touch-friendly controls.
• Compatibility with Gutenberg, Elementor, WPBakery and Divi through shortcodes.
• Unlimited standard sliders.
• Pro grouped layouts and filterable slider collections.
• Synchronised video comparisons and supported YouTube and Vimeo embeds.
• Automatic animation and scroll-controlled comparisons.
• Single-image effects and custom watermarks.
• Per-slider custom CSS.

Pros

• A substantial set of features available in the free version.
• Does not require Elementor or another specific page builder.
• Visual editor makes creating and configuring sliders straightforward.
• Supports both image and video comparisons in Pro.
• Grouped galleries help organise larger collections of comparisons.
• Several interaction and animation options.
• Works through shortcodes with a range of WordPress editors and page builders.
• Suitable for both simple comparisons and more elaborate presentations.

Things to Consider

Some of the more advanced features, including video comparisons, grouped galleries, watermarks and scroll-controlled effects, require the Pro version. If you only need a basic image comparison, you may not need those additional tools.

The range of settings also means there is more to explore than with a very lightweight plugin. If you only want to add one simple comparison and never change its appearance, a more minimal option may be sufficient.

Conobe Before & After Slider is worth considering if you want to start with standard image comparisons but have the option to build more advanced galleries and interactive experiences as your website grows.

Website: https://conobe.co.uk/plugins/conobe-before-and-after-slider-pro

2. BEAF – Before After Image Slider & Gallery

Best for: Website owners looking for an established before and after slider with gallery functionality and page builder integrations.

BEAF is a WordPress before and after image comparison plugin that provides tools for creating interactive image sliders and galleries. It is particularly relevant to websites using Elementor, although its available integrations and embedding options make it worth considering for a wider range of projects.

The plugin focuses on presenting two images together so visitors can interact with a divider and reveal the differences. It is suitable for photography, property renovations, design work and other visual transformations.

Key Features

• Interactive before and after image comparisons.
• Customisable slider appearance and controls.
• Responsive layouts for different screen sizes.
• Gallery functionality for presenting multiple comparisons.
• Integration with Elementor.
• Shortcode-based embedding options.
• Additional styling and layout functionality through available upgrades.

Pros and Cons

• Pros

  An established plugin in the before and after category, with a substantial user base, gallery functionality and useful options for websites using Elementor.

• Cons

  Some functionality may depend on the version or add-ons you choose. Check the available features carefully if you need a particular integration or advanced comparison behaviour.

BEAF is worth investigating if you want an established image comparison plugin and are particularly interested in displaying multiple comparisons. It is also a useful option to compare if your website is built around Elementor.

Website: https://wordpress.org/plugins/before-after-image-slider-for-elementor/

3. Twenty20 Image Before-After

Best for: Website owners who want a straightforward image comparison slider without a large collection of additional features.

Twenty20 Image Before-After is a well-known option in this category. Its main purpose is simple: place two images together and allow visitors to move a divider to compare them.

It supports a range of common WordPress environments, including the block editor and several page builders. This makes it a useful option if you want to add comparisons to an existing website without adopting a larger plugin ecosystem.

The plugin includes horizontal and vertical comparisons, custom labels and a hover interaction. It also provides shortcode options for configuring the comparison.

Key Features

• Interactive before and after image comparisons.
• Horizontal and vertical slider orientations.
• Custom before and after labels.
• Adjustable starting position.
• Mouse hover movement.
• Touch support for mobile devices.
• Shortcode configuration.
• Support for Gutenberg and selected page builders.

Pros and Cons

• Pros

  Straightforward functionality, a familiar image comparison experience and support for several common WordPress editing environments.

• Cons

  Its focus is primarily on image comparisons. If you need more advanced galleries, video comparisons, watermarks or other management features, you may need another solution.

Twenty20 is worth considering if you want to add a conventional before and after image comparison without needing a large collection of additional tools. It is a sensible starting point for simpler websites.

Website: https://wordpress.org/plugins/twenty20/

4. Before After Image

Best for: Website owners who want shortcode-based comparisons, Elementor controls or WooCommerce integration.

Before After Image is a plugin that offers several ways to add image comparisons to WordPress. It can be used through a shortcode, an Elementor widget or directly alongside WooCommerce products.

That WooCommerce integration makes it particularly interesting for stores that want to show a product transformation or visual comparison directly on a product page. It can also be used for more conventional portfolio and service website comparisons.

The plugin includes controls for slider orientation, labels, handle appearance and other styling options. Its Pro version adds further functionality, including automatic animation, three-image comparisons and full-screen viewing.

Key Features

• Shortcode-based image comparisons.
• Elementor widget integration.
• WooCommerce product integration.
• Horizontal and vertical orientations.
• Drag and hover interaction.
• Custom before and after labels.
• Configurable handle and divider appearance.
• Pro features including automatic animation and three-image comparisons.
• Full-screen comparison functionality in Pro.

Pros and Cons

• Pros

  Multiple ways to embed comparisons, useful WooCommerce integration and a selection of additional features in the Pro version.

• Cons

  Some advanced functionality requires the paid version. If you do not use Elementor or WooCommerce, some of its integrations may be less relevant to your website.

Before After Image is worth looking at if you specifically want to connect comparisons with WooCommerce products or use an Elementor widget with additional styling controls.

Website: https://wordpress.org/plugins/majestic-before-after-image/

5. Before After Image Comparison Slider for Elementor

Best for: Websites built with Elementor that want a dedicated before and after comparison widget.

As the name suggests, this plugin is designed specifically around Elementor. It provides an image comparison element that can be added through the Elementor editor, allowing users to upload their images and configure the comparison as part of the page-building process.

The plugin includes controls for image sizing, slider positioning, labels and interaction behaviour. It also supports multiple sliders on the same page.

There are additional gallery and carousel add-ons available, which may be useful if you want to display several comparisons together rather than adding each one individually.

Key Features

• Elementor drag-and-drop widget.
• Before and after image comparisons.
• Customisable image dimensions.
• Adjustable starting slider position.
• Custom before and after labels.
• Mouse click and hover interaction.
• Support for multiple sliders on a page.
• Additional gallery and carousel add-ons.

Pros and Cons

• Pros

  A familiar drag-and-drop workflow for Elementor users, with controls available directly within the page editor.

• Cons

  Its main focus is Elementor. If you use Gutenberg, another page builder or a more traditional shortcode-based workflow, a standalone plugin may be more flexible.

If your website is already built with Elementor and you want to configure comparisons directly in the page editor, this plugin is worth considering. If you want to use the same comparison functionality across different editors, check how the available embedding options compare.

Website: https://wordpress.org/plugins/before-after-image-comparison-slider-for-elementor/

6. WP Before After Image Slider (BefTer)

Best for: Website owners looking for image comparisons with additional media and layout options.

WP Before After Image Slider, also known as BefTer, is another option in the WordPress image comparison category. It offers a range of ways to create and embed comparisons, including a dedicated dashboard interface, shortcodes and page builder integration.

Its feature set includes horizontal and vertical comparisons, custom labels, hover interaction and lazy loading. The plugin also advertises additional media and comparison options, including video and more complex layouts.

This makes it worth considering if you want to explore alternatives that go beyond a simple two-image slider. As with any plugin offering free and paid functionality, check which features are included in the version you intend to use.

Key Features

• Interactive before and after comparisons.
• Horizontal and vertical layouts.
• Customisable labels and slider controls.
• Hover and drag interaction.
• Shortcode and widget support.
• Elementor integration.
• Lazy loading and responsive output.
• Additional media and comparison options.

Pros and Cons

• Pros

  A range of comparison and embedding options, with additional media functionality that may suit more involved projects.

• Cons

  The feature set is broader than a basic slider, so check the available settings and paid feature requirements to make sure it matches your intended use.

BefTer is worth investigating if you want to compare a range of media options and would like a plugin with more than the basic image reveal interaction.

Website: https://wordpress.org/plugins/wp-before-after-image-slider/

What Should You Look for in a WordPress Before and After Slider Plugin?

Most before and after slider plugins offer the same basic concept, but the details can make a significant difference to how useful the plugin is for your website.

Before choosing one, consider how you intend to use your comparisons and whether you need anything beyond a simple draggable divider.

1. Image Comparison and Alignment

The most important part of a before and after slider is how accurately it presents the two images. Ideally, you should use images with matching dimensions, crops and aspect ratios so the comparison feels natural when visitors move the divider.

Look for a plugin that allows you to control the starting position and, where useful, choose between horizontal and vertical comparisons.

2. Mobile and Touch Support

A comparison that works well with a mouse should also be easy to use on a touchscreen. Check that visitors can move the handle comfortably on phones and tablets, and that the slider adapts to smaller screen sizes.

Responsive behaviour is particularly important for service businesses and portfolios where a large proportion of visitors may be browsing on mobile devices.

3. Styling and Customisation

The comparison should look like part of your website rather than a separate component that has been dropped into the page. Custom labels, divider colours, handle styles, aspect ratios and spacing can help the slider fit your existing design.

If you need complete control over the appearance, check whether the plugin provides detailed styling options or custom CSS.

4. Shortcodes and Page Builder Compatibility

Consider how you want to add comparisons to your website. Some plugins are built around a specific page builder, while others generate shortcodes that can be used in different parts of WordPress.

A shortcode-based approach can be useful if you want to use the same plugin across Gutenberg, Elementor, Divi, WPBakery and other shortcode-compatible environments.

5. Galleries and Multiple Comparisons

If you have several projects to showcase, adding individual sliders to a page can quickly become difficult to manage. Gallery and grouping functionality allows you to organise comparisons into collections and display them together.

For example, a renovation company could have separate galleries for kitchens, bathrooms and extensions, while a photography website could organise comparisons by editing style or project.

6. Video Comparisons and Additional Effects

Not every project can be demonstrated effectively with still images. If you want to compare video footage, animation or editing work, check whether the plugin supports synchronised video comparisons and embedded video sources.

Other features such as automatic animation, scroll-controlled movement and watermarks can also be useful, but they are not essential for every website.

7. Performance and Image Handling

Before and after sliders often use two relatively large images, so image optimisation matters. Look for sensible image output, responsive image support and lazy loading where appropriate.

You should also optimise the images you upload. A comparison plugin cannot compensate for unnecessarily large image files or poorly prepared source images.

Which Businesses Can Benefit from a Before and After Slider?

Before and after sliders are useful anywhere the difference between two images tells a story. They are particularly effective for businesses where showing the result is more convincing than simply describing it.

• Photography: Compare original photographs with edited, retouched or colour-graded versions.
• Home improvement: Show kitchens, bathrooms, extensions, decorating and landscaping projects.
• Beauty and wellness: Present treatment results and visual transformations, with appropriate consent and context.
• Property: Compare buildings and rooms before and after renovation or refurbishment.
• Automotive: Showcase vehicle restoration, detailing, repairs and modifications.
• Web design: Demonstrate website redesigns and changes to layouts or branding.
• E-commerce: Compare product finishes, colours, packaging and design variations.
• Creative work: Show illustration, artwork, restoration and other visual processes.

For any before and after presentation, make sure the images are genuine and representative. In areas such as healthcare, beauty and fitness, avoid presenting comparisons in a way that could mislead visitors about typical results.

Do You Need a Simple Image Slider or a More Advanced Plugin?

If you only want to compare two photographs on a page, a simple image slider may be all you need. There is little benefit in paying for features you will never use.

However, if you regularly publish case studies, project galleries or transformations, additional functionality can make a difference. Grouping, filtering and gallery layouts can help visitors explore several examples without having to navigate between separate pages.

Video comparisons are another consideration. They are useful for demonstrating animation, colour grading, restoration and other processes where movement is part of the result.

Think about how your website will use comparisons over time, not just the first slider you want to publish. Choosing a plugin with the right balance of features can save you from changing solutions later.

Which WordPress Before and After Slider Plugin Should You Choose?

There isn't one plugin that is automatically the best choice for every website. The right option depends on your editor, the type of media you want to compare and how much control you need over the presentation.

Our Recommendations

• For image and video comparisons with advanced features

  Conobe Before & After Slider is worth considering if you want standard image comparisons alongside options for video, grouped galleries, animation, scroll-controlled reveals and custom watermarks.

• For established image sliders and galleries

  BEAF is worth investigating if you want an established before and after comparison plugin with gallery functionality and Elementor integration.

• For straightforward image comparisons

  Twenty20 Image Before-After is a sensible option if you want a conventional comparison slider without needing a large collection of additional features.

• For WooCommerce and Elementor integration

  Before After Image is worth considering if you want to add comparisons to WooCommerce products or use its Elementor widget.

• For Elementor-focused websites

  Before After Image Comparison Slider for Elementor provides a dedicated widget and controls within the Elementor editing experience.

• For additional media and comparison options

  WP Before After Image Slider (BefTer) is worth exploring if you want a broader range of comparison and media features.

If you only need one or two simple image comparisons, start with a lightweight option. If you want to build galleries, compare video or create more interactive presentations, look more closely at the advanced features and how they fit your workflow.

Frequently Asked Questions

What is a before and after slider in WordPress?

A before and after slider is an interactive image comparison that places two images together. Visitors move a divider to reveal more of either image, making it easy to see the difference between the two versions.

How do I add a before and after slider to WordPress?

Install a before and after slider plugin, upload or select your two images, configure the comparison and add it to a page or post. Many plugins generate a shortcode that you can paste into the WordPress editor or a compatible page builder.

Can I add a before and after slider without Elementor?

Yes. Several plugins work independently of Elementor and provide shortcodes or WordPress blocks. A shortcode-based plugin can be useful if you want to use comparisons across different editors and page builders.

Can I create before and after video comparisons in WordPress?

Yes, but you need a plugin that specifically supports video comparisons. Check whether it supports synchronised playback, uploaded video files or embedded sources such as YouTube and Vimeo. Video comparison functionality is often reserved for paid versions.

Can I have multiple before and after sliders on one page?

Yes. Most dedicated comparison plugins allow you to add multiple sliders to a page. If you have a large collection, look for gallery or grouping functionality so that you can manage and display comparisons more easily.

Do before and after sliders work on mobile devices?

Most modern comparison plugins are designed to be responsive and support touch interaction. However, it is worth testing your chosen plugin on a phone or tablet to make sure the handle is easy to use and the images display correctly.

Do I need images with the same dimensions?

For the best result, use images with matching dimensions, aspect ratios and crops. If the camera position or framing changes significantly between the two images, the comparison may be harder to follow.

Will a before and after slider slow down my website?

A comparison requires the browser to load and display two media files, so image sizes and loading behaviour matter. Optimise your images, use appropriate formats and consider lazy loading for comparisons further down the page. A well-built plugin should also avoid unnecessary scripts and styling.

Are WordPress before and after slider plugins free?

Several plugins offer free versions with standard image comparison functionality. Paid versions commonly add features such as galleries, advanced styling, video comparisons, animation, additional integrations and priority support.

Final Thoughts

A before and after slider is a simple way to make visual comparisons more engaging. Instead of asking visitors to compare two separate images, you give them an interactive way to explore the difference themselves.

For a small website, a straightforward image comparison plugin may be all you need. If you regularly showcase projects, transformations or creative work, features such as galleries, custom styling and video comparisons can give you more flexibility.

Take a look at how you intend to use comparisons across your website, then choose a plugin that provides the features you actually need. A simple, well-presented slider is often more effective than adding lots of effects that don't improve the visitor's experience.