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" · Menerima 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 | Keterangan |
|---|---|---|---|
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 (tampil saat arrows = true) |
arrowIcon | string (icon name) | — | Ikon (kosong = chevron bawaan) (tampil saat arrows = true) |
arrowSize | number (0–200) | 40 | Ukuran tombol (px) (tampil saat arrows = true) |
arrowIconSize | number (0–100) | 16 | Ukuran ikon (px) (tampil saat arrows = true) |
arrowRadius | CSS length | "9999px" | Radius (0 = persegi) (tampil saat arrows = true) |
arrowShadow | 'none'|'soft'|'medium' | "soft" | Shadow (tampil saat arrows = true) |
arrowState | 'normal'|'hover' | "normal" | tampil saat arrows = true |
arrowBg | CSS color | "#ffffff" | Background (tampil saat arrows = true & arrowState = normal) |
arrowIconColor | CSS color | "#111827" | Warna ikon (tampil saat arrows = true & arrowState = normal) |
arrowBorderWidth | number (0–20) | 1 | Border (px) (tampil saat arrows = true & arrowState = normal) |
arrowBorderColor | CSS color | "rgba(0,0,0,0.08)" | Warna border (tampil saat arrows = true & arrowState = normal) |
arrowBgHover | CSS color | — | Background (tampil saat arrows = true & arrowState = hover) |
arrowIconColorHover | CSS color | — | Warna ikon (tampil saat arrows = true & arrowState = hover) |
arrowBorderColorHover | CSS color | — | Warna border (tampil saat arrows = true & arrowState = hover) |
pagination | boolean | true | Tampilkan dot |
dotSize | number (0–60) | 8 | Ukuran (px) (tampil saat pagination = true) |
dotGap | number (0–60) | 8 | Jarak antar dot (px) (tampil saat pagination = true) |
dotRadius | CSS length | "9999px" | Radius (0 = persegi) (tampil saat pagination = true) |
dotState | 'normal'|'active' | "normal" | tampil saat pagination = true |
dotColor | CSS color | "rgba(0,0,0,0.2)" | Warna (tampil saat pagination = true & dotState = normal) |
dotColorHover | CSS color | — | Warna :hover (tampil saat pagination = true & dotState = normal) |
dotActiveColor | CSS color | "rgba(0,0,0,0.7)" | Warna aktif (tampil saat pagination = true & dotState = active) |
dotActiveScale | number (0.5–3) | 1.2 | Skala aktif (tampil saat pagination = true & dotState = active) |
autoplay | boolean | false | Autoplay |
interval | number (500–20000) | 3000 | Interval (ms) (tampil saat autoplay = true) |
pauseOnHover | boolean | true | Pause saat hover (tampil saat autoplay = true) |
sliderType | 'slide'|'loop'|'fade' | "slide" | Tipe |
speed | number (0–5000) | 400 | Kecepatan transisi (ms) |
drag | boolean | true | Drag mouse/sentuh |
Contoh
{
"id": "sli01abc",
"type": "slider",
"props": {},
"children": []
}