Creating a sleek horizontal scroll gallery in Webflow is a stylish way to display your visuals — perfect for portfolios, photography showcases, or product highlights. In this guide, you’ll learn how to design a one-row, scrollable gallery where users can swipe or scroll horizontally to reveal hidden images.
Why Use a Horizontal Scroll Gallery
Horizontal scroll galleries are a modern design feature that keep visitors engaged. Instead of cluttering your page with multiple rows of images, a single horizontal gallery allows you to present visual content in a clean, immersive layout. It’s great for showcasing:
- Photography or art portfolios
- Product carousels
- Client work collections
- Lifestyle images for fashion or travel brands
Webflow makes this possible with no code — just a few style settings.
Step 1: Set Up the Structure in Webflow
Start by creating a clear hierarchy for your gallery:
- Add a Section → name it gallery-section.
- Inside, place a Div Block called gallery-wrapper.
- Inside the wrapper, add another Div Block named gallery-track.
- Insert your images inside the track, each wrapped in a Div or as standalone Image Elements (gallery-item).
Your layout should look like this:
Section (gallery-section)
└─ Div (gallery-wrapper)
└─ Div (gallery-track)
├─ Image 1
├─ Image 2
├─ Image 3
└─ ...Step 2: Style Each Layer
To make your gallery scroll horizontally, apply these styles:
Gallery Section
- Width: 100%
- Overflow: Hidden
Gallery Wrapper
- Width: 100%
- Overflow-X: Scroll
- Overflow-Y: Hidden
- White-space: nowrap
Gallery Track
- Display: Flex
- Flex Direction: Row
- Gap: 1rem (or your preferred spacing)
- Align Items: Center
Gallery Item
- Fixed width (e.g., 300px) and height (e.g., 200px)
- flex: 0 0 auto to prevent shrinking
- Add optional margins or border-radius for aesthetics
Step 3: Hide the Scrollbar for a Clean Look
If you prefer a minimalist appearance, hide the scrollbar with custom CSS. Go to Page Settings → Custom Code → Before and add:
.gallery-wrapper::-webkit-scrollbar {
display: none;
}
.gallery-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}This removes the visible scrollbar while maintaining the scroll functionality.
Step 4: Add Smooth Scrolling
To enhance user experience, apply smooth scrolling:
.gallery-wrapper {
scroll-behavior: smooth;
}This makes horizontal scrolling feel natural and fluid across devices.
Optional: Add Scroll Snapping
For a professional finish, use CSS scroll snapping so the gallery “locks” onto each image neatly as the user scrolls:
.gallery-wrapper {
scroll-snap-type: x mandatory;
}
.gallery-item {
scroll-snap-align: start;
}SEO Tip: Optimize Your Gallery Images
To improve Webflow SEO, ensure every image in your gallery has:
- Descriptive alt text (e.g., “Minimalist coffee packaging design mockup”)
- Proper file names (e.g., modern-office-setup.jpg)
- Optimized file size for fast loading
Fast, image-rich pages with optimized alt tags improve ranking performance and accessibility.
Final Result
You’ll have a clean, one-row horizontal gallery where users can scroll sideways to explore your visuals. The rightmost images will remain hidden until scrolled into view — creating an elegant, interactive experience perfect for modern websites
