/
/
Slider Item Block
Slider Item Block
An individual slide inside a Slider Block. Each slide can hold any blocks, have its own background image or color, enable flex layout, and optionally link the entire slide.
SLIDE PREVIEW
Content Slide
Image Background
Linked Card
Content Slide
Image Background
Linked Card
Whole slide is clickable when url is set on the 3rd slide
When to use this block
- Each slide in a carousel — add one per slide
- Holds any content: text, images, cards, buttons
- Background images for full-bleed hero slides
- Clickable slides that link to a page
Flex Layout
Enable flex to arrange child blocks inside the slide. Useful for centering content or creating side-by-side layouts within a single slide.
Flex
Sidebar Panel
Enable Flex
Direction
Justify
Align
Gap
Not responsive
Unlike Grid Item’s flex mode, slider item flex controls are single-value only — no tablet or desktop overrides. The same direction, alignment, and gap apply across all breakpoints.
Options: direction (row/col/reverse), wrap, justify (6 values), align (5 values), gap (Tailwind scale 0–24).
Background
Solid color, gradient, or a full-bleed background image. Image is rendered as an absolutely-positioned <img> with object-cover, same technique as Grid Item Block.
Background
Sidebar Panel
Color
Gradient
Image
PRIORITY
Image — takes priority, suppresses color/gradient
Gradient — overrides solid color
Color — fallback
Link
Make the entire slide a clickable link. The link wraps all inner content. When both link and flex are enabled, flex classes move onto the <a> element.
Link
Sidebar Panel
URL
Open in new tab
Border, Radius & Shadow
Per-corner radius (responsive), border, and shadow presets. Applied to each slide individually.
Border Radius
Per-corner objects, responsive across 3 breakpoints. Round individual slides for card-style carousels.
Border & Shadow
Border (responsive) or shadow presets (sm–2xl, inner). Shadow takes priority over border.
Padding
Inner spacing in pixels. Responsive across breakpoints. Controls breathing room inside each slide.
Responsive: Mobile Tablet Desktop
All Available Controls
Flex Layout Direction, wrap, justify, align, gap — not responsive
enableFlex: toggle. flexDirection: row/col/reverse. flexWrap: wrap/nowrap/reverse. justifyContent: start/center/end/between/around/evenly. alignItems: start/center/end/stretch/baseline. flexGap: Tailwind scale (0–24). All single-value, not responsive — no Md/Lg variants exist on this block.
Background Color, gradient, or image
backgroundColor/backgroundGradient: inline style (gradient wins). backgroundImageUrl/backgroundImageId: absolute-positioned cover <img> — suppresses color/gradient when set, and adds relative to the outer div.
Link URL + new tab
url: wraps all content in <a class="grid-item-link">. linkTarget: "_blank" for new tab. rel: auto-set. Flex classes move onto the <a> when both link and flex are enabled — the outer div itself never gets flex classes in that case.
Border & Shadow Per-corner radius, border, shadow presets
Radius: borderRadiusMobile/Tablet/Desktop (per-corner). Border: borderMobile/Tablet/Desktop or legacy borderPosition+borderWidth+borderColor. Shadow: sm–2xl, inner (takes priority over border).
Padding All 4 sides, 3 breakpoints
paddingTop/Bottom/Left/Right (+Md/Lg). All in px. No margin controls on this block — spacing between slides is the parent slider-block‘s gapX.
Self Alignment justify-self, align-self
justifySelf/alignSelf: start, center, end, stretch. Controls how this slide aligns within the Swiper wrapper.