Carousel overflow click and drag


Similar to Netflix, I am trying to make a carousel row of videos which gets longer depending on CMS inputs.

I have a CMS with the Collection List being a grid. Collection Items are videos retrieved from the CMS. I have put the entire row of videos as Overflow: Auto. This means on desktop the row of videos is contained in the view port and there is a scrollbar underneath and on mobile a user can swipe to bring new videos onto their screen.

Question 1: For desktop, can I scroll left or right on the carousel using click and drag on the videos themselves or space around them? Because it’s a little annoying needing to click the scrollbar only, which is a small target.

Question 2: If question 1 is a yes, for desktop, can I then hide the overflow scrollbar? Then users can scroll the carousel using just the videos themselves and the space around them, meaning the ugly scrollbar can be removed.

Note: Read-Only link won’t show the videos because their CMS items. Link below.

Why not use a Slider? I found the Slider by Webflow to be unsuitable. Reason being, videos are uploaded by CMS and thus a row could contain 6 videos or 30 videos (random numbers). The Slider requires you to put in how many slides you want, but due to the unknown number of videos thanks to the CMS, this isn’t possible.

Thank you very much in advance.


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

Hi @GregDFE, I believe you would need custom code carousel for click and drag functions and random number of slide. I use flickity.js.

If custom code isn’t your thing, feel free to drop me a message.