Slider patterns
Five configurations of the native slider block (Splide.js): loop, fade, aligned content, no overlay, manual.
Welcome
Auto-looping slider
Three full-screen slides with overlay, title, subtitle and button.
Performance
Smooth transitions
Loop type, autoplay 5s, arrow navigation + pagination.
Bespoke
Fully configurable
Everything is set from the slider block panel.
Fade effect
Fade transition
Fade type: slides blend into one another.
Elegant
Stronger overlay
Overlay at 0.55 for strong contrast on the text.
Immersive
Full screen
Ideal for a clean homepage.
Content on the left
Custom alignment
contentAlign left + textAlign left for an editorial framing.
Readable
Controlled content width
The text stays within a readable width.
Flexible
All alignments
Horizontal, vertical and text alignment, all independent.
No overlay
Images in focus
overlayEnabled false: the image isn't darkened.
Pagination only
Arrows hidden
arrows false, pagination true — dot navigation.
Clean
Minimal
Perfect for a photo gallery.
Manual mode
No autoplay
autoplay false: the user controls navigation.
Content at the bottom
Vertical alignment
contentVerticalAlign bottom to anchor the text.
Keyboard
Accessible
Keyboard arrow navigation enabled.