Hello Webflow Community! I am looking to create an image gallery which does a few things:
displays a single image at a time
scrolls left to right/right to left
clicking any image opens a fullscreen gallery
The previously existing gallery was vertically stacked and had users scrolling for too long. I want to shift the user experience to something much more efficient. Thus far, I have been able to:
create the gallery (div block + image element)
bind to newly created Multi-Image field in CMS Collection
style gallery to display a single image which consumes the div block perfectly from a visual standpoint
I am completely stuck at figuring out how to get the gallery to scroll horizontally, before I even attempt to get a fullscreen gallery functionality. The page in question I’m working on is a Locations Template titled “Ronin 2.” I plan on duplicating the functionality with different images for the Locations Template titled “Ronin Harrisburg.” Any guidance would be greatly appreciated!
Thanks!!
To create a horizontal scrolling image gallery in Webflow, you’ll be using a vertical-to-horizontal scroll transformation technique. This method creates the illusion of horizontal scrolling while users scroll vertically down the page.
Create a “Track” Section that will contain your entire gallery
Inside the Track, add a “Camera” Div block set to overflow: hidden
Inside the Camera, add a “Frame” Div block containing your gallery images
Select the Track Section and add a “While scrolling in view” interaction
In the interaction settings, create a movement animation that translates the Frame from right to left
For responsive design, disable the scroll interaction for tablet and mobile breakpoints, and adjust the layout to standard vertical scrolling for smaller screens
For best results, ensure your Frame div is wide enough to accommodate all your images in a single row, and that your Camera div masks any overflow content.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
“Scroll” may be the incorrect term. I mean that I would like visitors to click left or right arrows to cycle through images sourced from CMS Collections. Button controlled scrolling, as opposed to physical scrolling.
Clicking any image should then open a fullscreen or larger lightbox-style viewer.
Perhaps I need to wrap my Collection List in a container div and then add button containers, before adding scroll animations? I honestly was under the impression there would be a simpler way to approach this.