Streaming live at 10am (PST)

Need some advice - custom vertical slider


I’m using Webflow for a few weeks now and love it!
I do need some advice on the following and hopefully you can point me in the right direction.
I’m not a coder, so if something sounds stupid… :slight_smile: My aplogizes in advanced.

Here goes:

My goal is to make a vertical slider which shows short news items.
Every news item is a div block of width 50vw and height 40vh. They’re all stacked along the Y axis
and then nested into a div block which masks out exactly one news item (also 50vw x 40vh)
I’ve sketched it out in the attachment. The principal is exactly the same as the normal slider
only vertical but as far as I know, I can’t change the direction of the normal slider within Webflow
so I started digging into Javascript.

Hours later I had something that actually worked:
published site:
(I’ve also added a .gif of the working prototype)

Ok, so what’s the problem? :slight_smile: Well, I’m using absolute dimensions in this prototype.
As long as every div block stays exactly the same width and height in pixels, I’m cool and it works.
If i start using relative dimensions (= vh and vw), it breaks really fast.

My question is: is it possible to make a vertical slider where I use relative dimensions?

At the moment I’m thinking:
Option A: There might be a simple way of doing this using the Webflow components?
Option B: Use absolute dimensions and add extra breakpoints to still make my site responsive?
Option C: Start using the Webflow tabs component and forget the vertical movement?

Many thanks in advance!

Additional info:

In my projects “body” I’m pulling in these scripts.

In the main.js file is where the “magic” happens:
(newsContainer holds the stacked news items)

$(’#NewsButtonUp’).on(‘click’, function() {"#NewsContainer", 0.75, {
transform: ‘translateY(40vh)’,
ease: Expo.easeInOut})

$(’#NewsButtonDown’).on(‘click’, function() {"#NewsContainer", 0.75, {
transform: ‘translateY(-40vh)’,
ease: Expo.easeInOut})


1 Like

Great question, @Rogier_Schalken! Definitely hope that I can help.

I recently completed a test that is exactly what you are talking about with the native Webflow slider to create a vertical slider.

You can view the project at the following URLs:
Live site:
Read-only link:

First, I rotated the slider block 90 degrees so that the transition between slides will be vertical:

But, you will notice when first implementing this style - the slides will be on their sides.

The next step is to rotate a div that is inside of the slide so that the contents are rotated back to normal:

Hopefully this helps, and definitely feel free to reach out if there is anything that I can help with :nerd_face:


@mistercreate Thanks for the fast reply! Really Appreciated it. I was hoping for a webflow solution, so this is great. I’ll let you know how it goes.

1 Like

that is quite clever! love your solution!

@mistercreate this is exactly what I am looking for! However, I noticed that the left and right arrow aren’t showing in your example. I started my own version and the arrows are not showing within the viewport. Do you have any advice on how to fix this?

For anyone still looking: I think this cloneable project helps a lot:
Made by @mistercreate