Slider
A dependency-free, container-aware scroll-snap slider with native touch scrolling, keyboard navigation, autoplay, accessible controls, and component-local Design Center controls.
Using the slider item component
Single slide
Native scroll slider
Uses native scrolling and scroll snapping. The slider stops at the first and last slide rather than cloning slides for an infinite loop.
Autoplay slider
Advances every five seconds. Use the Pause button to stop movement; it becomes Play when paused.
Button styling
Responsive columns
The maximum is four cards per page. CSS container queries set one, two, three or four columns based on the slider's own width, so a slider in a narrow column adapts independently of the viewport. This example uses slideByPage, so each control moves every visible card at once.
Compact navigation with a next-slide peek
This example is deliberately constrained to a 32 rem container, so the next-card peek is visible here too. Below a 640 px slider container, the arrows move below the content for 44 px touch targets. When a title is supplied, the arrows instead share its row.
Slider with Segment
API
| Parameter | Default | Type | Description |
|---|---|---|---|
|
autoSlide
|
true | integer|boolean|null | - |
|
peekSlides
|
false | boolean | - |
|
navigationHover
|
true | boolean | - |
|
ratio
|
16:9 | string | - |
|
repeatSlide
|
true | boolean | - |
|
type
|
slide | string | - |
|
heroStyle
|
false | boolean | - |
|
shadow
|
true | boolean | - |
|
title
|
false | string|boolean | - |
|
preamble
|
false | string|boolean | - |
|
customButtons
|
false | string|boolean | - |
|
arrowButtons
|
[] | array | - |
|
padding
|
0 | integer | - |
|
gap
|
2 | integer | - |
|
slidesPerPage
|
1 | integer | - |
|
slideByPage
|
false | boolean | - |
|
compactNavigation
|
true | boolean | - |
Subcomponents
Slider Item
-
| Parameter | Default | Type | Purpose |
|---|---|---|---|
|
title
|
string|boolean | - | |
|
text
|
string|boolean | - | |
|
cta
|
[] | array|boolean | - |
|
image
|
false | ComponentLibrary\Integrations\Image\ImageInterface|string|boolean | - |
|
video
|
false | string|boolean | - |
|
alt
|
?string | - | |
|
link
|
false | string|boolean | - |
|
linkDescription
|
string | - | |
|
layout
|
bottom | string | - |
|
theme
|
base | string | - |
|
containerColor
|
string | - | |
|
heroStyle
|
false | string|boolean | - |
|
textAlignment
|
string | - | |
|
overlay
|
none | string | - |
|
slot
|
Illuminate\Support\HtmlString|Illuminate\View\ComponentSlot|string|null | - | |
|
bottom
|
false | string|boolean | - |
|
classList
|
[] | array | Additional CSS classes added to the wrapping element. |
|
attributeList
|
[] | array | Additional HTML attributes added to the wrapping element. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-slider--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-slider--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-slider--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-slider--color--primary
|
var(--color--primary) | color | - | Controls the navigation icon color. |
|
--c-slider--color--alpha
|
var(--color--alpha) | rgba | - | Controls the overlay tone for content slides. |
|
--c-slider--font-family-heading
|
var(--font-family-heading) | font | - | Falls back to body font if not set. |
|
--c-slider--font-family-base
|
var(--font-family-base) | font | - | Body Font |
|
--c-slider--font-size-100
|
var(--font-size-100) | range | - | Base font size. |
|
--c-slider--color--alpha-contrast
|
var(--color--alpha-contrast) | color | - | Used for text and icons on alpha overlays. |
|
--c-slider--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-slider--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-slider--color--surface
|
var(--color--surface) | color | - | Controls the circular surface behind the play/pause icon. |
|
--c-slider--duration-100
|
var(--duration-100) | range | - | For the most immediate feedback, such as a small selected-state change. |
|
--c-slider--duration-180
|
var(--duration-180) | range | - | Default duration for nearby layers and component state changes. |
|
--c-slider--gap-multiplier
|
2 | range | - | Space between slides, measured in base units. A slider instance can override this through its gap parameter. |
|
--c-slider--padding-multiplier
|
0 | range | - | Horizontal inset inside the scroll track, measured in base units. A slider instance can override this through its padding parameter. |
|
--c-slider--shadow-clearance-multiplier
|
1.5 | range | - | Vertical room reserved around cards so their shadows remain visible, measured in base units. |
|
--c-slider--peek-width-multiplier
|
6 | range | - | Visible width of the next card on compact sliders, measured in base units. |
|
--c-slider--peek-fade-width-multiplier
|
3 | range | - | Width of the soft fade at the viewport edge, measured in base units. |
|
--c-slider--preamble-max-width
|
75 | range | - | Maximum readable line length for the slider preamble. |
|
--c-slider--item-container-max-width-multiplier
|
118 | range | - | Maximum width of centered slide content, measured in base units. |
|
--c-slider--segment-card-min-height-multiplier
|
70 | range | - | Minimum height for card-layout segments inside a slider, measured in base units. |
|
--c-slider--header-column-gap-multiplier
|
4 | range | - | Space between title content and its navigation controls, measured in base units. |
|
--c-slider--header-row-gap-multiplier
|
1 | range | - | Space between title and preamble rows, measured in base units. |
|
--c-slider--header-bottom-gap-multiplier
|
2 | range | - | Space below the title area and above the slider track, measured in base units. |
|
--c-slider--control-offset-multiplier
|
-1.5 | range | - | Offset for floating navigation controls, measured in base units. |
|
--c-slider--control-inset-multiplier
|
2.5 | range | - | Inset for floating navigation controls in larger containers, measured in base units. |
|
--c-slider--autoplay-control-size-multiplier
|
5 | range | - | Size of the play/pause control, measured in base units. |
|
--c-slider--autoplay-control-inset-multiplier
|
1.5 | range | - | Inset for the play/pause control, measured in base units. |
|
--c-slider--slide-fade-duration
|
100 | range | - | Duration of the visibility fade used by ordinary slides. |
|
--c-slider--peek-fade-duration
|
180 | range | - | Duration of the edge-fade handoff when the final slide is reached. |
|
--c-slider--autoplay-control-fade-duration
|
180 | range | - | Duration of the play/pause control reveal. |
|
--c-slider--overlay-opacity
|
0.8 | range | - | Controls the opacity of the slide content overlay. |