Create an Elementor Before and After Slider with Custom CSS & JS

In this tutorial, we’ll learn how to create an Elementor Before and After Slider. This feature allows users to compare two images side-by-side with the ability to slide between them, providing a clear before and after perspective.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor

Creating the Elementor Before and After Slider

1. Create a blank page in Elementor and insert a container.
2. Drag an HTML widget into your container.
3. Insert the following code into the HTML widget:

   <! --Sourced from: https://img-comparison-slider.sneas.io/-->
   <img-comparison-slider>
     <img slot="first" src="https://staging14.websquadron.co.uk/wp-content/uploads/Mid028.webp" width="600" height="600"/>
     <img slot="second" src="https://staging14.websquadron.co.uk/wp-content/uploads/Mid027.webp" width="600" height="600"/>
   </img-comparison-slider>
   <script
     defer
     src="https://unpkg.com/img-comparison-slider@7/dist/index.js"
   ></script>

   Source: WebSquadron

   

4. Ensure proper alignment by including Center Center in your CSS.
5. Modify the slider to be vertical or horizontal, and add labels if desired.
6. Replace placeholders (e.g. https://staging14.websquadron.co.uk/wp-content/uploads/Mid028.webp) with URLs for your before and after images.
7. Define the width and height for both images to ensure they match.
8. Click Update and preview the slider on the live page.

Supplementary Resources

• Elementor Documentation

Elementor Before and After Slider – Conclusion

With these steps, you’ve created a responsive before and after slider in Elementor, enhancing your website’s interactivity without the need for additional plugins.