November 8, 2023

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

Play Video

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.


Please make sure you have the following installed and activated:

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:>
      <img slot="first" src="" width="600" height="600"/>
      <img slot="second" src="" width="600" height="600"/>

    Source: WebSquadron

    Creating the Elementor Before and After Slider

  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. 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.

Preview the slider on the live page

Supplementary Resources

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.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create an Elementor Before and After Slider with Custom CSS & JS
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.