Carousel
Slide, fade, cards, and cover variants all use the same H/B/F data contract. Change header.carousel_variant and the Sass v2 parent class changes the behavior.
Accessible controls
Keyboard, touch, indicators, previous, and next controls come from the template.
Inspect classesFade carousel
Crossfade between slides for editorial hero sections and quotes.
Soft transitions
The same slide data renders through the fade variant.
Editorial rhythm
Good for stories where motion should feel calm.
One contract
Only header.carousel_variant changes.
Cards carousel
Multiple visible cards for testimonials, blog posts, projects, or profile posts.
Card One
Multi-item carousel with captions.
Card Two
A strong fit for profile post cards.
Card Three
Uses the same controls.
Card Four
Scrollable on mobile.
Cover carousel
Hero-style slides for landing pages and image-led sections.
Cover Slide
Large visual first, content overlaid by Sass v2.
Hero Motion
Useful for landing pages and campaign headers.
No custom JS
The carousel module reads the same data attributes.
Carousel data contract
Use header.carousel_variant plus body[] slides. The renderer emits the exact Sass v2 and JS classes.
H/B/F JSON
The body array is the slide list. Each item can provide img_src, title/h3, description/p, and cta.
{
"header": {
"component_type": "carousel",
"carousel_variant": "cards",
"autoplay": false
},
"body": [
{
"img_src": "/images/slide.jpg",
"title": "Slide title",
"description": "Slide copy",
"cta": { "title": "Read more", "link": "/docs" }
}
]
}