Streaming live at 10am (PST)

Create a horizontal scrollable Grid Carousel, that is scrollable only with Touchpad & Touch

Hi there,

Can anyone help me turn my Cards on a Grid here, and turn it into a Horizontal Carousel on Mobile and smaller breakpoints only, and can be both scrollable with Touchpad and Touch (only horizontally)?

This is a Webflow template, and I’m pretty sure they used Custom Code in here.
That is why some interactions that I’m seeing is not showing up on the Inspector Panel, and I’m kinda concerned messing it up myself.

Any help to teach me how to modify Webflow Templates with Custom Code, just like this would be appreciated.


Here is my site Read-Only: LINK

I’m pretty sure that templates are not allowed to have custom code unless you add it yourself.

That being said, I would probably use tiny-slider (custom code) to achieve what you are looking for. While it may be possible with Webflow’s slider I think it has issues and I usually avoid it.

See GitHub - ganlanyuan/tiny-slider: Vanilla javascript slider for all purposes.

I see. But as you can see on my GIF image below, I have this template where it has this amazing Box Shadow and Transition effects when being hovered.

yzp3wp6.gif

Yet if you looked further in the Inspect, there is no Box Shadow or Transition effects in it.
There are no other Interactions or Propoerties either on Hover that implements like that.

I see. That looks kind of complex. Would you help me quickly integrate or setup this?
Is Webflow’s current native Layout options not enough for this simple horizontal scrolling?

For the record, I don’t need snapping and animations and all that. I just need it to be able to scroll horizontally

Yep you’re right. I checked everywhere. There is no Custom Code there.

That is strange, given that those really have Box Shadow animation effects that is not showing up on Webflow Inspector panel

Your missing style location is visible in this screenshot.

As for the slider, that is what I use because I find the Webflow slider component lacking and it has issues with some mobile devices that a prefer to avoid.