Making a Before & After Slider

[rahulhussain (R)]

Hi,

I am somewhat new to Webflow (only made a couple of sites) but wanted to know how to produce a before/after slider. In my case: a van before and after a paintjob (it would essentially be two jpegs).

Can anyone give me any pointers how I go about creating one or if it is indeed possible to make on in Webflow I would really appreciate it?

I only have a little coding experience (hence I’m using Webflow) so please bear that in mind.

Thanks

[EvanJones]

Hi Rahul

Do you just want a slider with 2 images (ie slide 1 would be the “before” image and slide 2 the “after”) so viewers can sliiiiiidddeee between the two?

If so, its really easy:

1. Add a slider to your page.
   

   

2. Give it a class (that way you can customise its height, width and so on later )
   

3. By default Webflow will include 2 slides in the slider element (perfect for you!). Find them in the navigator panel by expanding the slider element, then give each of them a class too (calling them slide 1 and slide 2 will be fine).
   

4. Add your before image to slide 2 and the after image to slide 2 (adding them as background images like below is easiest generally)
   

   

Couple of notes:

• Make sure you get your background images to “cover” when you’re uploading. It’ll ensure they fill the full slider
• As you’ve given a class to your slider in step 2, you can go ahead & customize its size
• If you go into the settings tab you can set your slide to autoplay, change the animation between slides and so on. Have fun!

[rahulhussain (R)]

I know how to make a conventional slider in webflow. I was thinking more a slider like the one below:

so that the user can interact and see the difference between both images.

Any help creating this would be great.

[vincent (Vincent Bidaux)]

It’s possible to make a before/after element within webflow without custom code, but it would be automatic, you won’t be able to drag the handle by yourself… you’d have a button to click on for example, and the animation will run.

I had bookmarked the following dragable before after element because it has a very stright forward UX, just hover and when you hover out, it gently goes back to default. But there are maybe issues with touch devices, you have to test:

Found this one also the new code – not found – blog / 842

But if you google it, you’ll find tons of different tutorials with various looks. Just make sure you chose one that works on mobile too.

[rahulhussain (R)]

Hi thanks for the info and the links.

Where would I place the code for something like this in Webflows interface. Is it placed in Embed widget or would it be placed in Custom Code in the sites dashboard. I see that before slider has at least 2 elements of code HTML and CSS (& JS- I’m unsure what to place and where. Again any help would be great.