Issues with horizontal scrolling image gallery

Hi, Webflow community!

I have been having some/a lot of trouble getting a horizontal scrolling image gallery to work. There are a number of issues that I have listed below and any tips on any of them would be incredibly appreciated!

  1. The images in the Gallery Track extend beyond the viewable width of the page but this means that even when the gallery isn’t in view you can scroll off to the right into empty white space. I thought that the solution to this would be to set the body to overflow: hidden but this created another problem that the live page could not be scrolled at all.

  2. The Scroll track also needs to be correct length so that when the gallery ends the page starts scrolling down again immediately. The images in the gallery are backgrounds of div blocks that I have set to certain pixel sizes so as to keep the images a uniform size (portrait 247.5 x368.5 and landscape width 635.8 height 368.5). I worked out the width of all the images including the spacing and set the ‘Gallery Track’ width to that number of pixels but it hasn’t done the job.

  3. I can’t work out the best way to then resize this entire element to work well on tablet and mobile devices and still kept the aspect ratio of all of the images the same.

The published version of the galleries can be found halfway down both of these pages:

https://www.ajourneythrough.co.uk/the-greek-ionian

https://www.ajourneythrough.co.uk/the-bay-of-naples-amalfi-coast

And the sites read-only link is:

https://preview.webflow.com/preview/a-journey-through?utm_source=a-journey-through&preview=7cfe778bf62769611cc4c7e38b0d6762

Any help anyone has would be ace!

Thanks

James

@cytberdave
@webflow

Here is my site Read-Only: LINK
(how to share your site Read-Only link)