Slider
Carousel (SplideJS) whose DIRECT children each become a slide — arrows + dots + responsive slides-per-view. Hydrated client-side; renders as a static row in the canvas.
Type: "slider" · Accepts children
Carousel (SplideJS) whose DIRECT children each become a slide — arrows + dots + responsive slides-per-view. Hydrated client-side; renders as a static row in the canvas.
Props
| Field | Type | Default | Description |
|---|---|---|---|
perPage | number (1–12) | 4 | Slides / view (Desktop) |
perPageTablet | number (1–12) | 2 | Slides / view (Tablet) |
perPageMobile | number (1–12) | 1 | Slides / view (Mobile) |
gap | CSS length | "24px" | Gap |
arrows | boolean | true | Tampilkan panah |
arrowsPosition | 'inside'|'outside' | "inside" | Posisi (shown when arrows = true) |
arrowIcon | string (icon name) | — | Ikon (kosong = chevron bawaan) (shown when arrows = true) |
arrowSize | number (0–200) | 40 | Ukuran tombol (px) (shown when arrows = true) |
arrowIconSize | number (0–100) | 16 | Ukuran ikon (px) (shown when arrows = true) |
arrowRadius | CSS length | "9999px" | Radius (0 = persegi) (shown when arrows = true) |
arrowShadow | 'none'|'soft'|'medium' | "soft" | Shadow (shown when arrows = true) |
arrowState | 'normal'|'hover' | "normal" | shown when arrows = true |
arrowBg | CSS color | "#ffffff" | Background (shown when arrows = true & arrowState = normal) |
arrowIconColor | CSS color | "#111827" | Warna ikon (shown when arrows = true & arrowState = normal) |
arrowBorderWidth | number (0–20) | 1 | Border (px) (shown when arrows = true & arrowState = normal) |
arrowBorderColor | CSS color | "rgba(0,0,0,0.08)" | Warna border (shown when arrows = true & arrowState = normal) |
arrowBgHover | CSS color | — | Background (shown when arrows = true & arrowState = hover) |
arrowIconColorHover | CSS color | — | Warna ikon (shown when arrows = true & arrowState = hover) |
arrowBorderColorHover | CSS color | — | Warna border (shown when arrows = true & arrowState = hover) |
pagination | boolean | true | Tampilkan dot |
dotSize | number (0–60) | 8 | Ukuran (px) (shown when pagination = true) |
dotGap | number (0–60) | 8 | Jarak antar dot (px) (shown when pagination = true) |
dotRadius | CSS length | "9999px" | Radius (0 = persegi) (shown when pagination = true) |
dotState | 'normal'|'active' | "normal" | shown when pagination = true |
dotColor | CSS color | "rgba(0,0,0,0.2)" | Warna (shown when pagination = true & dotState = normal) |
dotColorHover | CSS color | — | Warna :hover (shown when pagination = true & dotState = normal) |
dotActiveColor | CSS color | "rgba(0,0,0,0.7)" | Warna aktif (shown when pagination = true & dotState = active) |
dotActiveScale | number (0.5–3) | 1.2 | Skala aktif (shown when pagination = true & dotState = active) |
autoplay | boolean | false | Autoplay |
interval | number (500–20000) | 3000 | Interval (ms) (shown when autoplay = true) |
pauseOnHover | boolean | true | Pause saat hover (shown when autoplay = true) |
sliderType | 'slide'|'loop'|'fade' | "slide" | Tipe |
speed | number (0–5000) | 400 | Kecepatan transisi (ms) |
drag | boolean | true | Drag mouse/sentuh |
Example
{
"id": "sli01abc",
"type": "slider",
"props": {},
"children": []
}