glide-slider — feature-rich carousel (Glide.js)
Wrapper around Glide.js — when the simple slider component is not enough. Adds autoplay, bullet indicators, breakpoint configs, infinite loop, drag, and the full Glide event API.
Use it for hero banners, product carousels with autoplay, testimonial slides. For static product lists where users scroll on their own, prefer the lighter slider component.
Install
npm install @glidejs/glide
npx czg-ui add glide-slider@import '@glidejs/glide/dist/css/glide.core.min.css';
@import 'components/glide-slider';import './components/glide-slider';Requires base. Pulls @glidejs/glide (~25 KB gzipped).
Parameters
| Param | Type | Default | Notes | |
|---|---|---|---|---|
id | string | random | Required for stable JS init | |
perView | int | 1 | Slides visible at the largest breakpoint | |
gap | int | 16 | Space between slides (px) | |
autoplay | int\ | false | false | Interval in ms; false to disable |
loop | bool | true | Infinite loop | |
arrows | bool | true | Prev/next buttons | |
bullets | bool | true | Pagination dots | |
breakpoints | array\ | null | — | Glide breakpoints [width => ['perView' => N]] |
items | array | [] | Items to render | |
itemTemplate | string\ | null | — | Path to a Latte template that renders one slide |
Usage
{include /app/components/Slider/glide-slider.latte,
id => 'home-hero',
perView => 1,
autoplay => 5000,
items => $heroSlides,
itemTemplate => '/app/components/Hero/hero-slide.latte'
}Responsive — different perView per width:
{include /app/components/Slider/glide-slider.latte,
id => 'products',
perView => 4,
breakpoints => [
1280 => ['perView' => 3],
960 => ['perView' => 2],
640 => ['perView' => 1],
],
items => $products
}When NOT to use
- Few static items (≤ 3) where everything fits on screen — show them
in a row, no slider
- Critical content (key product feature, primary CTA) — autoplay is
the carousel anti-pattern; users tune out
- Single image hero without rotation — just an
<img>is fine
For lightweight scrollable lists without autoplay/breakpoints, use the simpler slider component instead.