Making a Before & After Slider

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