How to Add Horizontal Scrolling in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to create horizontal scrolling in Webflow for a carousel or a scrolling gallery.

Example

1. Create the scroll container

Create a scroll-container Div. Set: overflow-x: scroll (or auto), display: flex, flex-wrap: nowrap. Add scrollbar-width: none to hide the scrollbar. Inside it, add your child elements with a fixed width or min-width.

2. Enable scroll snap

On the container, add this via a CSS embed: scroll-snap-type: x mandatory. On each child item: scroll-snap-align: start. This creates a snapping effect for each item as you scroll.

3. Add navigation buttons (optional)

const container = document.querySelector('.scroll-container');
document.querySelector('.scroll-next').addEventListener('click', function() {
  container.scrollBy({ left: 300, behavior: 'smooth' });
});
document.querySelector('.scroll-prev').addEventListener('click', function() {
  container.scrollBy({ left: -300, behavior: 'smooth' });
});

Conclusion

CSS horizontal scrolling gives you a modern, lightweight experience. Use cases:

• Client logo galleries
• Testimonial carousels
• Horizontal timeline