Slider

Overview

A flexible slider/carousel container component that provides smooth scrolling functionality for child content blocks. Features auto-scroll capabilities, navigation arrows, progress indicators, and responsive behavior. All JavaScript functionality is contained within Alpine.js x-data attributes for efficient performance.

Common use cases

Create image carousels or product sliders
Display featured content in a scrollable horizontal layout
Use auto-scroll for automatic content rotation
Add navigation controls for user interaction
Show progress indicators to display slide position
Enable scroll animations for engaging content reveals

Compatible blocks

The following blocks can be nested within this block:

Gallery navigation

For product media, add Slider gallery and thumbnails to the slider. Under Show advanced settings, use Show scroll mask to control whether the slider edges fade. It is on by default.

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals 6 advanced options including enable instant transition, enable auto scroll, and more	Checkbox (default: false)

Content

Setting	Description	Options
Show arrows	Displays navigation arrows for the slider	Checkbox (default: true)
Show indicators	Displays progress indicators (dots or numbers)	Checkbox (default: true)
Show controls on hover	Shows controls only when hovering over the slider	Checkbox (default: false) Visible when show arrows or show indicators is true
Show scrollbar	Displays a scrollbar for the slider	Checkbox (default: false)
Show progress bar	Displays a progress bar at the top of the slider	Checkbox (default: false) Visible when enable auto scroll is true
Enable instant transition	Removes smooth scrolling for instant slide changes	Checkbox (default: false) Visible when Show advanced settings is on
Enable auto scroll	Automatically scrolls through slides	Checkbox (default: false) Visible when Show advanced settings is on
Auto scroll delay	Time delay between auto-scroll transitions	0 - 20 s (default: 0) Visible when enable auto scroll is true Visible when Show advanced settings is on and Enable auto scroll

Spacing

Setting	Description	Options
Top spacing	Padding space at the top of the slider	0 - 300 px (default: 0)
Bottom spacing	Padding space at the bottom of the slider	0 - 300 px (default: 0)
Enable horizontal padding	Adds horizontal padding around the slider	Checkbox (default: false)
Gap size	Controls spacing between slider items	• None • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Color scheme	Controls the background and text colors	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank
Color arrow	Controls the color of navigation arrows	• Primary • Secondary • Tertiary • Neutral • Plain • Outline • Inverted outline • Blur • Link • Inverted link Visible when show arrows is true
Color indicator	Controls the color of progress indicators	• Primary • Secondary • Tertiary • Neutral • Plain • Outline • Inverted outline • Blur • Transparent Visible when show indicators is true

Style

Setting	Description	Options
Button size	Controls the size of navigation arrow buttons	• Extra small • Small (default) • Standard • Large Visible when show arrows is true
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All
Indicator radius	Controls the border radius of progress indicators	• None • Default (default) • Sm • Md • Lg • Xl • 2xl • Full

Layout

Setting	Description	Options
Vertical alignment	Controls vertical alignment of slider items	• Top (default) • Middle • Bottom
Control alignment	Controls horizontal alignment of navigation controls	• Left • Center • Right (default) Visible when show arrows or show indicators is true
Control placement	Controls vertical placement of navigation controls	• Top (default) • Middle • Bottom • Under Visible when show arrows or show indicators is true
Enable scroll margin	Applies margin based on theme settings for scroll padding	Checkbox (default: false)

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on
Load animation	Animation when the block first loads	• None (default) • Fade • Fade up • Offset fade • Offset fade up Visible when Show advanced settings is on and Scroll animation is None
Scroll animation	Adds scroll-triggered animations	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom Visible when Show advanced settings is on and Load animation is None

Slider

Overview

Common use cases

Create image carousels or product sliders
Display featured content in a scrollable horizontal layout
Use auto-scroll for automatic content rotation
Add navigation controls for user interaction
Show progress indicators to display slide position
Enable scroll animations for engaging content reveals

Compatible blocks

The following blocks can be nested within this block:

Gallery navigation

For product media, add Slider gallery and thumbnails to the slider. Under Show advanced settings, use Show scroll mask to control whether the slider edges fade. It is on by default.

Block settings

General

Setting	Description	Options
Show advanced settings	Reveals 6 advanced options including enable instant transition, enable auto scroll, and more	Checkbox (default: false)

Content

Setting	Description	Options
Show arrows	Displays navigation arrows for the slider	Checkbox (default: true)
Show indicators	Displays progress indicators (dots or numbers)	Checkbox (default: true)
Show controls on hover	Shows controls only when hovering over the slider	Checkbox (default: false) Visible when show arrows or show indicators is true
Show scrollbar	Displays a scrollbar for the slider	Checkbox (default: false)
Show progress bar	Displays a progress bar at the top of the slider	Checkbox (default: false) Visible when enable auto scroll is true
Enable instant transition	Removes smooth scrolling for instant slide changes	Checkbox (default: false) Visible when Show advanced settings is on
Enable auto scroll	Automatically scrolls through slides	Checkbox (default: false) Visible when Show advanced settings is on
Auto scroll delay	Time delay between auto-scroll transitions	0 - 20 s (default: 0) Visible when enable auto scroll is true Visible when Show advanced settings is on and Enable auto scroll

Spacing

Setting	Description	Options
Top spacing	Padding space at the top of the slider	0 - 300 px (default: 0)
Bottom spacing	Padding space at the bottom of the slider	0 - 300 px (default: 0)
Enable horizontal padding	Adds horizontal padding around the slider	Checkbox (default: false)
Gap size	Controls spacing between slider items	• None • Default (default) • XS • SM • MD • LG • XL

Color

Setting	Description	Options
Color scheme	Controls the background and text colors	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank
Color arrow	Controls the color of navigation arrows	• Primary • Secondary • Tertiary • Neutral • Plain • Outline • Inverted outline • Blur • Link • Inverted link Visible when show arrows is true
Color indicator	Controls the color of progress indicators	• Primary • Secondary • Tertiary • Neutral • Plain • Outline • Inverted outline • Blur • Transparent Visible when show indicators is true

Style

Setting	Description	Options
Button size	Controls the size of navigation arrow buttons	• Extra small • Small (default) • Standard • Large Visible when show arrows is true
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All
Indicator radius	Controls the border radius of progress indicators	• None • Default (default) • Sm • Md • Lg • Xl • 2xl • Full

Layout

Setting	Description	Options
Vertical alignment	Controls vertical alignment of slider items	• Top (default) • Middle • Bottom
Control alignment	Controls horizontal alignment of navigation controls	• Left • Center • Right (default) Visible when show arrows or show indicators is true
Control placement	Controls vertical placement of navigation controls	• Top (default) • Middle • Bottom • Under Visible when show arrows or show indicators is true
Enable scroll margin	Applies margin based on theme settings for scroll padding	Checkbox (default: false)

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only Visible when Show advanced settings is on
Load animation	Animation when the block first loads	• None (default) • Fade • Fade up • Offset fade • Offset fade up Visible when Show advanced settings is on and Scroll animation is None
Scroll animation	Adds scroll-triggered animations	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom Visible when Show advanced settings is on and Load animation is None

Slab

Slider

Overview

Common use cases

Compatible blocks

Gallery navigation

Block settings

General

Content

Spacing

Color

Style

Layout

Display

Slab

Slider

Overview

Common use cases

Compatible blocks

Gallery navigation

Block settings

General

Content

Spacing

Color

Style

Layout

Display