How to add a Before & After Slider

  • 17 June 2020
  • 3 replies
  • 49 views

Hello,

I am interested in taking an Unbounce subscription. The landing pages and pop-ups look terrific. However, there’s one thing I am missing and I wonder if there’s an easy way to add it. I’m a photographer and I sell presets for Lightroom and Photoshop. So I want my landing pages to have a Before & After slider that people can drag from the left to the right, revealing the after image.
Something like this.
Any ideas on how to achieve that? Many thanks in advance.


3 replies

Userlevel 5
Badge +4

Hello @Piet and welcome !

yes you can do it with the help of a script.
You’ll find all the info on this topic : TwentyTwenty Visual Diff Script

you’ll have to do some modification in the code to adapt it to the size of your photo and on our LP we had to do one for Desktop and one for Mobile.

you can see the result here : https://information.maintiendomicile.com/remplacer-votre-baignoire-par-une-douche-securisee/f.html

tl;dr: slider works perfectly on desktop, displays correctly on mobile but the slider function does not work.

Has anyone experienced an issue where the slider will work perfectly on desktop, but the slider function of the element doesn’t work on the mobile version of their page? Paid a developer to look at it and he said there’s nothing wrong with the code, so curious if anyone has experienced this in the past and if so, how it was resolved.

Thanks in advance!

I am experiencing the same issue The slider appears oddly at the bottom. It seems to be due to some update on Unbounce at some point.

Reply