Streaming live at 10am (PST)

Webflow Workshop #134: Creating a multi-column slider in Webflow

Join us live on Tuesday, December 11th at 10am (pacific)
[ Save your spot ]

With the flexibility of Webflow, you can customize components to do a lot more than you may have realized. In this workshop, we’ll show you how to create a multi-column slider, as seen on the Airbnb site in their “Recommended for you” section — all without coding.

2 Likes

Clone today’s @webflow workshop project here:

Have fun! :smiley:

3 Likes

Hey @PixelGeek, thanks so much for putting together the workshop! Bumping this up because I noticed that the slides within the last slide wrapper are wider than the other ones, despite adding the 20% right padding on them. Please see two screenshots attached.

Any ideas for how to make them exactly the same width? I tried adding more right padding and that works, but it pushes the whole content to the left, so there’s a weird gap on the right.

Man, I can’t seem to figure out how to re-create the Airbnb slider :sweat_smile:

Here’s live:

https://slider-8ea7df.webflow.io/

And here’s the editor:

https://preview.webflow.com/preview/slider-8ea7df?utm_medium=preview_link&utm_source=designer&utm_content=slider-8ea7df&preview=fa9f0b441139c1c6f37fbf3aadb5ad77&mode=preview

I got the slides shrinking proportionally based on screen size, but there are other problems in addition to the last slide widths:

  • My custom SVG right arrow is not visible if I place it to the middle of the border. I tried adding a z-value but it didn’t help.

  • For some reason, some images won’t fill the whole slide. One of my sliders with the same image in every slide has no problems, but when I replace the image to the ones I’d like to use, the border of the slide shows up.

  • It’d also be nice to have 5 slides showing in full at all times. I only plan to use this for desktop, and I have a max content width of 1200px.

Mostly I’d like to figure out how to make the cards the same width, but would be so awesome to figure out these other things as well! Big thanks for any input! :slight_smile:

Here’s a screenshot of the goal: