Shop
Category Card Slider
Horizontal slider of category tiles for listing pages and category browsing.
Overview
CategoryCardSlider is the swipeable counterpart to CategoryCardGrid. It renders a horizontal strip of LinkTiles, typically used under a listing-page title to surface subcategories without crowding the page. Navigation chrome stays visible across breakpoints (watchOverflow is off in the swiper config) so shoppers always have a reach for the next tile.
The variant prop picks the per-tile layout:
variant | When to use |
|---|---|
'basic' | Standard subcategory strip. |
'compact' | Dense strips under listing titles. |
'compact-bordered' | Compact tile with a border for visual separation on busy backgrounds. |
'big' | Hero-grade tiles on landing pages. |
Auto-import tag: <LCategoryCardSlider>.
Key Business & UX Benefits
- Horizontal strip surfaces subcategories without crowding the page, keeping the listing grid above the fold where shoppers expect it.
- Same four variants as the grid component let merchandising switch between strip and grid presentations without rewriting templates.
- Touch-first swipe behavior matches the gesture shoppers already use on mobile, which is now the majority of commerce traffic.
navigationPositionandhasScrollbarprops let teams tune the chrome around the strip without touching the swiper config.
Pro-Tip from Larry: Use
compact for dense subcategory strips under listing titles; big for hero-grade tiles on landing pages.Usage
LCategoryCardSlider
Feature List
- Same four variants as CategoryCardGrid ('basic', 'compact', 'compact-bordered', 'big') so layouts swap between strip and grid with no template rewrite
- Navigation chrome stays visible across breakpoints so the next tile is always one tap away
- Touch-first swipe behavior matches the gesture shoppers already use on mobile listing pages
- Built on LinkTile so every tile is an accessible link with its own focus state
- Aliases preserve legacy URL paths (inpagenavigationbasicslider, bigslider, compactslider) so existing campaigns stay live
API Reference
| Prop | Default | Type |
|---|---|---|
variantrequired | LinkTileVariant ("basic" | "compact" | "compact-bordered" | "big") | |
nodes | [] | CategoryCardSliderNode[] { title, href, media, 5 more }Optional data-driven nodes. Ignored when the default slot has content. |
caption | string | |
captionColor | string | |
heading | string | |
headingTag | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | |
headingColor | string | |
subline | string | |
sublineColor | string | |
hasScrollbar | false | boolean |
navigationPosition | bottom | "top" | "bottom" |
textAlignment | left | "left" | "center" | "right" |
| Slot | Type |
|---|---|
default | anySlot for CategoryCard children (BlockCategoryCard instances). Takes precedence over |