Streaming live at 10am (PST)

Need some advice - custom vertical slider


#1

Hello!

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:
https://preview.webflow.com/preview/research-development?preview=cc8ba7da28348ffeaf9512cec54c39cc
published site: http://research-development.webflow.io/
(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() {
TweenMax.to("#NewsContainer", 0.75, {
transform: ‘translateY(40vh)’,
ease: Expo.easeInOut})
});

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

webflow_news_widget


#2

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: http://vertical-slide-transitions.webflow.io/
Read-only link: https://preview.webflow.com/preview/vertical-slide-transitions?preview=0229191d1bd31b19fef4f43917c1ee25

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:


#3

@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.