Use the widget builder below to create your free Before and After Slider widget. Select a template and click “Continue with this template” to get started.
How to Add a Before/After Photo Slider to Your Website
- Choose a template: All of the templates are responsive. Names of available templates are Simple comparison, Retouch Slider, List of Works, and Product comparison. Select a preferred template and click the “Continue with this template” button.
- Add comparison sets: Click on the “Add Set” button and update both images for the before and after. You can also add labels, captions, and multiple image sets.
- Layout settings: Choose a layout that best suits your content. The ‘List’ layout is great for displaying a series of comparisons in a linear fashion, while the ‘Carousel’ layout is perfect for a more dynamic presentation. You can also set the width in px or % to fit your website’s design.
- Settings: This section includes setting up the image ratio, slider’s direction, labels’ position, divider’s settings, interaction behavior, and full-screen mode.
- Customize appearance: You can customize the widget’s look by changing the background, labels, captions, and controls. Custom CSS and JavaScript fields are also available for further styles and scripts.
- Get embed code: Once you have finished designing the before and after photo slider, click the “Add to website for free” button and sign up on the following page to save your widget. In there, you can copy the HTML code.
- Add Before/After slider to your website: Copy the image comparison widget’s embed code and use it on your website.
The Image Comparison Slider’s HTML Embed Code
Your Image Comparison Slider’s embed code includes An external JavaScript file and an HTML div tag with a class attribute unique to the widget you created. Paste the embed code on your website’s template, theme, or HTML source code editor in the places where you want to embed the before-and-after slider.
How to Manage Your Before and After Slider Widget
Once you have created your before and after widget for websites, you can easily manage it on your account. In your dashboard, search for the “Before And After Slider” app under the list of apps. As you can see from the following screenshot, you can create more Before/After Slider widgets, edit existing ones, and get HTML embed code.
