Magoo Component UI
CSS-less skeletons · 4 themes
Magoo Component UI
CSS-less skeletons · 4 themes carousel-autoplay organism experimental A full-width single-slide hero rotator that auto-advances with dots, arrows and a progress bar, pausing on hover or focus.
The width preview needs a screen wider than the chosen width — use a larger device (or a desktop browser) to see the desktop and tablet layouts.
Ship your next release in record time with a component library your agents can browse.
Get started
Author once and generate SDC, React, Vue and Storybook from the same contract.
See the catalog
Restyle every component by changing a fixed set of CSS variables — no forked markup.
Read the guide
layout/carousel-autoplayname: "Autoplay Carousel"
short_description: A full-width single-slide hero rotator that auto-advances with dots, arrows and a progress bar, pausing on hover or focus.
long_visual_description: >
A full-bleed, rounded hero panel showing one slide at a time. Each slide is a wide 16:9 (21:9 from
the sm breakpoint) image with a dark bottom-up scrim and white caption — an uppercase eyebrow, a
large heading, a short subtitle and a solid CTA button. Circular translucent previous/next arrows
overlay the left and right edges, a centered row of small dots sits near the bottom, and a thin
progress bar across the top fills as the current slide plays.
use_cases:
- Homepage hero that rotates through several featured campaigns.
- Landing page banner cycling promotions or announcements.
- Product spotlight that auto-advances through key highlights.
- Editorial cover rotator for top stories on a news site.
- Event or conference hero cycling speakers or sessions.
- Marketing splash showcasing multiple value propositions in turn.
recommended_for:
- A single-slide hero that should auto-advance but pause on interaction.
- Full-width promotional banners rendered from structured slide data.
avoid_for:
- Showing several cards in view at once (use carousel-grid).
- A static, non-rotating hero (use hero-image-bg).
markets:
- Global
example_usage: >
Pass an items array (each { image, eyebrow, title, subtitle, cta_label, href }) and set the
rotation speed with interval (4, 6 or 8 seconds). Autoplay is on by default and pauses on hover or
focus; turn it off with autoplay:false to make the carousel purely manual via the arrows and dots.
how_to_use: >
The slides live in a horizontal snap track (one slide per view), so the first slide renders with no
JavaScript and appears in screenshots. behavior.js reads data-autoplay and data-interval from the
root: when data-autoplay is "true" it advances one slide every interval, wrapping to the first
after the last, and pauses on hover/focus (resuming on leave/blur). The top progress bar fills over
the interval and freezes while paused. Autoplay is always suppressed when the visitor prefers
reduced motion; the arrows and dots still work in that case. The portable self-init reads config
from data-* attributes — no props object is passed.
props:
items: "The slides, in order. Each item: image (optional), eyebrow (optional kicker), title, subtitle (optional), cta_label (optional — renders a CTA button), href (the CTA link)."
interval: "Seconds each slide shows before auto-advancing: 4, 6 or 8."
autoplay: "When true the carousel auto-advances and pauses on hover/focus; when false it is manual only. Reduced-motion visitors never get autoplay."
show_arrows: "Show the previous/next arrow buttons overlaid on the edges."
show_dots: "Show the row of navigation dots (one per slide)."
label: "Accessible name announced for the carousel region."
lifecycle: experimental
content_model: A rotating set of full-width hero slides rendered from an items array.
theming:
tokens_used:
- --color-primary
- --color-primary-contrast
- --color-secondary
- --color-surface-raised
- --radius-card
- --radius-button
- --radius-pill
- --shadow-card
- --duration-token
- --font-heading
editorial_guidance: >
Keep captions short — one heading line and a single subtitle sentence read best over an image.
Order slides by priority since the first is what most visitors see. Use a slower interval (8s) when
slides carry more text so there is time to read before advancing.
relationships:
related:
- layout/carousel-grid
- layout/carousel-fade
- marketing/hero-image-bg
categorization:
category: Layout
subcategory: Carousels
atomic_type: organism
usage_type: [media]
maturity: ai-generated
wcag:
level: AA
notes: The region carries an aria-label and aria-roledescription; arrows and dots are labelled buttons, autoplay pauses on hover/focus, and rotation is suppressed for reduced-motion visitors.
keyboard_support: Arrows and dots are focusable buttons that activate on Enter/Space; focusing any control pauses autoplay until focus leaves.
seo_score: 30
text_direction: both
| Name | Type | Req |
|---|---|---|
| items | array | ✓ |
| interval | enum (4 | 6 | 8) | |
| autoplay | boolean | |
| show_arrows | boolean | |
| show_dots | boolean | |
| label | string |
The slides live in a horizontal snap track (one slide per view), so the first slide renders with no JavaScript and appears in screenshots. behavior.js reads data-autoplay and data-interval from the root: when data-autoplay is "true" it advances one slide every interval, wrapping to the first after the last, and pauses on hover/focus (resuming on leave/blur). The top progress bar fills over the interval and freezes while paused. Autoplay is always suppressed when the visitor prefers reduced motion; the arrows and dots still work in that case. The portable self-init reads config from data-* attributes — no props object is passed.