Image Slider
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { ImageSlider } from "@corew500/ui/image-slider"
<ImageSlider>Content</ImageSlider>Variants
imageSliderVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultminimalframed | default |
| aspectRatio | 16/94/31/1auto | 16/9 |
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images* | SliderImage[] | — | Array of images to display |
| mode | enum | carousel | Slider mode: carousel or comparison |
| autoPlay | enum | false | Enable auto-play in carousel mode |
| interval | number | 5000 | Auto-play interval in milliseconds |
| showControls | enum | true | Show navigation controls |
| showIndicators | enum | true | Show indicator dots |
| onSlideChange | (index: number) => void | — | Callback when slide changes |
| defaultIndex | number | 0 | Initial slide index |
| variant | enum | default | — |
| aspectRatio | enum | 16/9 | — |
Accessibility
Keyboard Navigation
- Keyboard: Arrow keys navigate slides or adjust slider position.
Screen Readers
- - Carousel: `role="region"` with `aria-roledescription="carousel"`.
- Comparison: `role="slider"` with proper ARIA value attributes.
- All images require alt text for screen readers.
Localization
Translatable Content
- - Alt text for images should be translated.
- ARIA labels ("Previous slide", "Next slide") are hardcoded but can be customized.
