slider — lightweight horizontal carousel
Simple carousel with prev/next arrows. Native CSS scroll-snap under the hood — small, fast, no autoplay, no bullets, no infinite loop. For the fancier use case (autoplay, bullets, breakpoints) pick glide-slider instead.
Use it for product strips on category / homepage, reference gallery, related items section — anywhere users want to peek at a list and scroll through it themselves.
Install
npx czg-ui add slider@import 'components/slider'; to app.scss, import './components/slider'; to app.js.
Requires base.
Parameters
| Param | Type | Default | Notes | |||
|---|---|---|---|---|---|---|
id | string | — | Unique id (required for JS bindings) | |||
items | iterable | — | Collection passed one-by-one to itemTemplate | |||
itemsPerView | int | 3 | Visible items at the largest breakpoint (1 \ | 2 \ | 3 \ | 4) |
itemTemplate | string\ | null | — | Path to a Latte template that renders one item |
Responsive behavior
Built-in breakpoints (no config needed):
| Width | Items per view |
|---|---|
| ≥ desktop | as configured (default 3) |
| 640–960px | 2 (capped from 3 or 4) |
| < 640px | 1 |
Set via the data-items-per-view attribute the wrapper renders.
Usage
{var $products = $eshopRepository->getRelated($product->id, 6)}
{include /app/components/Slider/slider.latte,
id => 'related',
items => $products,
itemsPerView => 4,
itemTemplate => '/app/components/Eshop/product-card.latte'
}The card template receives $item:
{* product-card.latte *}
<a href="{$item->url}" class="product-card">
<img src="{$item->image}" alt="{$item->title}">
<h3>{$item->title}</h3>
</a>When NOT to use
- Hero with single rotating banner — pick
glide-slider(autoplay) - Pagination over a large dataset — slider is for ~3–10 items, not
100; use real pagination + grid instead