Streaming live at 10am (PST)

Horizontal scroll with CMS images (like an Instagram story feed)

Hi there,

I was wondering if someone can help me out.
I want to create a similar effect like this: https://webflow.com/blog/creating-horizontal-scrolling.
Like an Instagram story but on desktop :slight_smile:

Some pointers:

  • By scrolling vertically, you actually scroll horizontally.
  • I want to do this with a CMS generated Rich text field including multiple images & video’s (this is the webpage: https://fontanel-2019.webflow.io/stories/merijn-hos)
  • Since not all CMS items have the same amount of images I can’t give a fixed width item to the div
  • I would like to have a custom scroll bar like this:
    Custom CSS - Horizontal Scrollbar
  • This is a sketch of the effect I’m going for:
    39

Is there anyone who could help me out or point me in the right direction?

Thanks!
Thomas

By slider. This is ± complex layout (Because the last slider is align to right -or- center - most of the times could solve only by javascript).

Flickity slider - use a lot this idea/pattern
https://codepen.io/desandro/pen/gbvOvy

No way by webflow (Yet) to align cells.

overflox-x
The scroller is regular overflow-x: hidden; (In your screenshot you create custom design for the scroller. This is separate issue). Without slider use overflow-x: hidden; and create very long div.

https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

Hi Siton,

Thanks for your reply! I don’t know if I totally explained it right, but it’s ok for now to not have an instagram like slider where you can press a button. My main question is if I can ‘hijack’ the vertical page scroll to be horizontal, like here: http://side-scrolling-in-ix2.webflow.io/

This way, you can only reach the end of the page by scrolling to the bottom, something that’s not possible in my current version. Do you understand what I mean?

Thanks,
Thomas

This is your link?
http://side-scrolling-in-ix2.webflow.io/

Its hard to 100% understand (Maybe add screenshot).

Hi Siton,

Yes as you can see in the example link provided, when you scroll through the page vertically, your page scrolls sideways. Normally this only happens when you scroll your mouse sideways. I am curious how that scroll hijack is done.

Thanks
Thomas