Streaming live at 10am (PST)

Making a Before & After Slider

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

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 :slight_smile: )

  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!
1 Like

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.

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:

http://codepen.io/ace/pen/BqEer

Found this one also http://demosthenes.info/blog/842/A-Mobile-Ready-Before-And-After-Image-Comparison-UI

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.

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.

2 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.