Streaming live at 10am (PST)

Making a Before & After Slider


#1

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


#2

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


#3

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.


#4

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.


#5

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.


#6

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


#7