Hero Slider
BlockBasic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { HeroSlider } from "@corew500/ui/blocks/hero-slider"
<HeroSlider>Content</HeroSlider>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| slides* | HeroSlide[] | — | Array of slides to display |
| autoPlay | enum | true | Enable auto-play |
| interval | number | 5000 | Auto-play interval in milliseconds |
| showControls | enum | true | Show navigation controls |
| showIndicators | enum | true | Show indicator dots |
| labels | { previous?: string; next?: string; } | — | Labels for accessibility (i18n support) |
| renderCta | (slide: HeroSlide, isPrimary: boolean) => ReactNode | — | Custom render function for CTA buttons |
| height | enum | screen | — |
| overlay | enum | gradient | — |
| contentPosition | enum | center | — |
Localization
Translatable Content
- - Component accepts pre-resolved translated strings
- All user-facing text is customizable via props:
- `slides[].title` - Slide title text
- `slides[].cta.label` - Primary button text
- `slides[].secondaryCta.label` - Secondary button text
- `labels.previous`, `labels.next` - Navigation button aria-labels
- Image alt text should be localized in slides[].image.alt
Additional
- `slides[].subtitle` - Slide subtitle/description
