DEV Community

Discussion on: CSS-only horizontally-scrolling cards with snapping

Collapse
 
allanwhite profile image
Allan White

Another idea was to have it grabbable and let the mouse users just grab & drag. Cursor change could do that. Not sure most users would think to do so though. User test all the codepens! ;)

Collapse
 
jeremydouglas profile image
Jeremy D. Hoover

Yes, that works. I solved this in another way on a lower budget site. I went with multiple rows of cards and an expand link. This changes the entire row from a horizontal scroll to a simple list.

Thread Thread
 
allanwhite profile image
Allan White

I just happened to swing back by your comment Jeremy, the toggling layout you have is a really snappy, simple solution to that challenge. Lets the user decide (with low "penalty") how they want to navigate the items. 👏

Collapse
 
totiiimon profile image
Totiimon

Or maybe just add some buttons to swap the cards and let this functionality be secondary. But I guess it would be best having in mind all the edge cases where this won't be usable.