C&C Docs
Log in

cnc-scrollx

A horizontal scroller for a row of content that will not fit — cards, chips, thumbnails. Adds drag-to-scroll with the mouse and, optionally, half-page arrow buttons.

Quick start

Put a row of items in the default slot. Drag it with the mouse, or turn on arrows for buttons that jump half a viewport at a time.

Recent projects
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
 
<cnc-scrollx title="Recent projects" arrows>
  <div class="flex gap-3">
    <div class="w-40 shrink-0">Card 1</div>
    …
  </div>
</cnc-scrollx>

Usage guidance

Give the slotted children shrink-0. A flex row whose items are allowed to shrink will always fit, so there is nothing to scroll and the widget looks broken — this is the first thing to check.

Do not hide anything ESSENTIAL off to the right. Horizontal scrolling is easy to miss, arrows only appear when you ask for them, and there is no scroll position to react to — so a row that ends in a call to action will lose the people who never dragged it. Keep it for browsing collections where seeing the first few is enough.

Reach for cnc-carousel when the row is a gallery with a defined sequence, and for ordinary wrapping when the content would read just as well on two lines.

← Back to Widgets