Slider
Content Slider
Slot-driven slider for promotional banners and content slides, with touch and keyboard navigation.
Overview
ContentSlider is the slot-driven slider for hero areas and editorial content rotation: multiple banners, featured posts, campaign slides. All content flows through the default slot, so the slider stays flexible for any content shape. Touch and keyboard navigation work on mobile and desktop.
Key Business & UX Benefits
- One slider drives hero areas, editorial rotations, and campaign carousels, so brand teams stay on a single motion pattern across the site.
- Hybrid
slotandquerydata sources let marketing curate the homepage by hand while keeping blog excerpts auto-fresh. - Touch and keyboard navigation work consistently on mobile, desktop, and assistive tech, protecting accessibility and conversion alike.
- Editors compose slides in Studio, shipping new hero rotations the same hour the creative lands.
Pro-Tip from Larry: Use
dataSource: 'query' for blog excerpt sliders and let the slot mode handle hand-curated campaign content.Usage
LContentSlider
Feature List
- Slot-driven slider hosts banners, featured posts, and campaign slides through the default slot for flexible content shapes
- Touch and keyboard navigation work consistently on mobile, desktop, and assistive tech
- One slider drives hero areas, editorial rotations, and campaign carousels, keeping one motion pattern across the site
API Reference
| Prop | Default | Type |
|---|---|---|
headingrequired | string | |
surfaceTone | SurfaceTone ("light" | "dark" | "bright") | |
textPosition | left | "center" | "left" | "right" |
navigationPosition | top | "top" | "bottom" |
hasScrollbar | false | boolean |
caption | string | |
captionColor | string | |
headingColor | string | |
subline | string | |
sublineColor | string | |
cta | { text, link, variant } |
| Slot | Type |
|---|---|
default | {} |