I am looking to create a section on my website that allows users to scroll through horizontally only when their mouse is hovering over the section and/or when they swipe on the specific section in mobile. Below is a gif of what I would like it to do. All examples that I have been able to find on forums and tutorials make the horizontal scroll sticky to the page until the user has completely scrolled through the list. I would like the user to be able to scroll past the section vertically if they do not want to review the whole collection of items.
I DO NOT want to replicate these:
I want the section to be interactive on its own and not require the user to complete scroll through it if they don’t want to. Netflix’s website is a similar example, Here is a tutorial I found explaining how to do it with CSS:
Here is my public share link: [LINK]
**Keep in mind it is my first site and a huge work in progress. I have a lot of other aspects to work on to improve the site, I just plan to use this horizontal scrolling frequently throughout.