Slider effect to drag from left to right to switch between two images

Probably haven’t explained that very well, and don’t know if there’s a name for it, but I’ve seen it a few times now, and was wondering if its possible in webflow. The page here has an example of what I mean - where you can see the before and after pics of a proposed development. If anyone knows a. if its possible, and b. of any tutorials, that would be much appreciated. Thank you!

It’s possible to do natively within Webflow only if you set it up to change on hover. So as you hover left, or hover right it would reveal the images. It wouldn’t do it on click and drag. Doing this is easy enough with “While moving over element” interactions.

To do a click and drag version, you can implement a couple different JS options, which would require custom code, but shouldn’t be to tricky. Here’s a couple different JavaScript options.

Thank you - I’ll check those out.

Here are a couple cloneables:
https://webflow.com/website/before-and-after-image-cloneable
https://webflow.com/website/magicslider

1 Like