Before and After Slider for HTML

Compare before-and-after visual changes on your HTML 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 HTML

Create your Before and After Slider widget

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

Screenshots

Before and After Slider for HTML
1 / 6

Description

Before and After Slider by Elfsight will help you compose tempting sales-efficient photos for your website. Customers can discover all the effects that your goods or services bring. Just upload two photos to Before and After Slider for HTML and they will be shown with a divider that moves to watch the change. You can embed unlimited slides, every one with its own caption. The divider direction can be horizontal or vertical, and you can choose the best image ratio. Your users will will have no other choice but to make a purchase, as soon as they see the real result| of your products!

Launch before & after slider to achieve your business peaks more efficiently!

We offer practical and uncomplicated features, check some of them:

  • Shape any number of Before and After couples of pictures
  • Insert captions with text formatting settings to each slide
  • Two layouts: List and Carousel
  • Horizontal or vertical moving of the divider
  • Clicking and dragging or simply hovering to shift the divider
  • Swiping on touch devices

Test all the personalization features in fully functional demo

How do I embed Before and After Slider on my HTML website?

Simply fulfill the guidelines below to insert the plugin.

  1. Perform our free configurator and start shaping your custom-built widget.
    Find the preferable form and features of the tool and apply the edits.
  2. Copy your individual code appearing in the widow on Elfsight Apps
    As soon as the customization of your personal tool is done, copy the exclusive code in the appearing window and keep it for further need.
  3. Get started with using the tool on your HTML homepage
    Place the code you’ve copied recently into your web page and apply the edits.
  4. You’re done! The integration is fully accomplished
    Go to your page to see how’s the plugin working.

On condition of having inquiries or confront some complications, feel free to write to our support team. Our consultants are eager to help you with all the questions you may have on the product.

Do I need special hosting to use Before and After Slider on HTML?

No special hosting is required. As long as your HTML website supports JavaScript, the Before and After Slider will function properly.

Does it support vertical and horizontal layouts?

Yes, you can choose either a vertical or horizontal divider orientation depending on how you want to present your image comparison.

How can visitors interact with the divider?

The slider offers Drag & Click mode as well as Hover mode, allowing users to move the divider manually or simply by hovering over the image.

Can I add clickable links inside captions?

Yes, captions support hyperlinks, so you can direct visitors to product pages, services, portfolios, or case studies directly from the slider.

Can I set the default divider position?

Absolutely. You can define the initial divider placement, deciding how much of the “before” or “after” image is visible when the page loads.

Which image formats are recommended for HTML pages?

For best performance, use optimized JPG or PNG files that follow recommended size and resolution guidelines for faster loading.

Are images automatically optimized by the slider?

No, images are displayed exactly as uploaded. It’s recommended to compress and optimize them beforehand to ensure smooth performance.

Can I use the slider for mockups or design previews?

Yes, the slider works with any two images, including mockups, renders, UI designs, architectural plans, or visual revisions.

Can I compare more than two images in one slider?

Each slide supports a comparison of two images. To show multiple stages, you can create several slides in sequence.

Can I lock the divider so users cannot move it?

The slider is designed for interactive comparison, so the divider remains movable and cannot be permanently fixed in place.

Pricing

14-day money back guarantee. Risk-free, you can cancel at anytime.
Elfsight Apps
Cross-platform software
from $0 / month
start with free plan
Unlimited domains
Free and on-time support
Free installation help
Great deal for multiple apps
Easy to edit