Layout 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:
Block settings
Content
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)
Enable auto scroll
Automatically scrolls through slides
Checkbox (default: false)
Auto scroll delay
Time delay between auto-scroll transitions
0 - 20 s (default: 0) Visible when enable auto scroll is true
Spacing
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
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
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
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
Visibility
Controls when the block is visible
• All (default) • Mobile only • Desktop only
Scroll animation
Adds scroll-triggered animations
• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom
Last updated
Was this helpful?