Streaming live at 10am (PST)

A dynamic before and after slider!

@magicmark - thanks for this! Is there a way to use this code and not have it be dynamic? I’ll need to export the code and CMS items aren’t supported for exported code. Thanks!

1 Like


Glad you like it!

Yes, just take the dynamic slug out and replace with the actual image location of where it’s stored.

You’ll of course do this for both images and don’t forget to make sure they’re the same dimensions.

Hope that helps. :grinning:


I was looking for something like this to use in my portfolio. Thanks a lot for sharing it. :slight_smile:

1 Like

This is awesome!!! :smiley:

1 Like

Hey Mark @magicmark,

Your slider works wonderfully on a normal page, however when I try to add the collection list dynamically to a collection page template - the published site just shows a blank screen where the before / after section appears.

Do you know what maybe causing this?

Thanks in advance for your reply. :wink:


I can see where the problem is, but not sure how to solve this one…

There is an issue with the code when it’s placed onto a Dynamic Page. I’ve done a video to show the issue.

@samliew is this something you would be able to offer advice with?


1 Like

Ah sorry @samliew, @exponent42 did share it but has since edited the post and removed it.

If you could share it your published url and share link please @exponent42 :+1:t2:

Yes, had the same question and I can’t find it. Some one knows the answer, please share

Hey @innes :wave:

Which question did you have as there were a few asked :slight_smile:

ow yes sorry, this one.

There seems to be a limitation when you add this on to a dynamic page. I’ve not been able to get this to work on dynamic pages unfortunately, only a static page, using dynamic data.

It seems it will require some coding expertise. If you want to share your read only link, you could leave it open so if anyone comes along they may be able to work a solution for this.

Sorry I couldn’t be more help with this one!

Yup, custom code is required to get before/after comparison tool working with the CMS.

Yes I know but some how it seems to be not working. I did some digging and the reason it colleps is becouse of this code:

The container collepse becous of the position absolute but it is nessesary so I gave the container a heigt of 600px and then the container stay’s open. But that is not the problem. Some how in the dinamic page, the jaquery code does not work. I whent to inspector in fire fox and this error came up:

and the syntaxError must be on this line:

but this is what bugs me because in a statick page, even with dynamic (or none dynamic content) there is no syntax error. So some thing about the dynamic page makes this code brake. And I tried some other code as wel then the twenty twenty code and the result is the same. I can fix the collapsing container but I can not fix de jaquery code that provides a slider, and the scaling of the immages. So I think I found a bug… can this be possible? In a minute I will share my work so that you can see what I mean. (and sorry for my bad englisch)

share link to img slider testing page where I tested 2 codes:

I olsow made it clonable so you can see all the code:

I found a solution. it is probably not the best one but it works. On all browsers and for dynamic content… I only hate the styling so I will work on that but here is the link. It is a different code. I could not solve it with the twenty-twenty code.

here you see a result:

and here you can find the code:

Your share link doesn’t seem to work like your BESA AG project. Can you share your project or make something cloneabke that works please?

I am trying to embed some text along with the images, but the slider always shows the text, regardless of where the slider is positioned.

Some Green Text <img src='green image> </div> <pre><code> <div class = "purple side"> Some Purple Text <img src='purple image> </div>

While the images slide and cover each other up, the current solution aways shows the Green Text and the Purple text divs.

Anyone know how to edit so the text bock is covered up too?

What an awesome contribution.

Would this work with 3 layer solution like this:

Hi anybody been able to get this before and after widget working smoothly with the CMS and dynamic pages?

I’d pay someone for their time if they have figured it out.


1 Like

For anyone still looking for a solution, I posted a separate topic and turns out it just needs a space in between the 2 curly brackets! The slider is now working on a CMS page :raised_hands:t3: