November 9, 2023

Create a Bricks Builder Before and After Slider with Custom CSS & JS

Play Video

Creating a Bricks Builder before and after slider can be a neat addition to your website, allowing users to visually compare two images. This tutorial will walk you through the process using custom CSS and JavaScript.


Please make sure you have the following installed and activated:

Creating the Bricks Builder Before and After Slider

Setting Up Your Images

  • Upload your images
    In your WordPress media library, upload the ‘before’ and ‘after’ images you wish to use.

Adjusting Bricks Settings

  1. Navigate to Bricks > Settings > Builder Access > Code Execution.
  2. Ensure that code execution is enabled for administrators.
    Ensure that code execution is enabled for administrators

Adding the Code

  1. Navigate to the section container where you want the slider.
  2. Add a code widget.
  3. Copy the necessary JavaScript and CSS below:
    <! --Sourced from:>
      <img slot="first" src="" width="600" height="600"/>
      <img slot="second" src="" width="600" height="600"/>

    Source: WebSquadron

  4. Paste in the JavaScript and CSS code you’ve obtained into the code widget.
    Paste in the JavaScript and CSS code you've obtained into the code widget
  5. Define the image paths, width, and height within the code.
  6. Toggle the “Execute code” option in the code widget.
    Toggle the "Execute code" option in the code widget
  7. Save and preview your Bricks builder before and after slider.|
    Save and preview your Bricks builder before and after slider

Troubleshooting Common Issues

  1. Centering the slider
    If the images are not aligning correctly, add a ‘center’ tag within your code.
  2. Preventing flashing
    Ensure that ‘execute code’ is toggled on to avoid any flashing during the transition.

Supplementary Resources

Bricks Builder Before and After Slider – Conclusion

By following these steps, you should now have a fully functional before and after slider on your Bricks Builder site. Remember to enable code execution in the Bricks settings and ensure your images are properly centered for the best user experience.

Required Resources

Bricks Builder Logo
Payment required
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 a Bricks Builder 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.