Need some advice - custom vertical slider

Design help Custom code
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
webflow_news_widget1280×640 78.9 KB
webflow_news_widget

1 Like
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: Webflow - Vertical Slide Transitions

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

image
image2047×1126 344 KB

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:

image
image2048×1129 368 KB

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

4 Likes
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.

1 Like
4

that is quite clever! love your solution!

5

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

https://webflow.com/design/kathryns-test-2?pageId=5e536d5b3373092edbfa1570

6

For anyone still looking: I think this cloneable project helps a lot: https://showcasesearch.webflow.io/projects/https-webflow-com-website-vertical-menu-with-section-selection-rfsn-1495911-39ce0
Made by @mistercreate