Special Elements
Vertical Story
Vertical story-style carousel with progress indicators.
carouselstoryverticalprogress
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [url1, url2, ...] | Array of image URLs to display in the carousel. |
labels | {title?: string, subtitle?: string}[] | [] | Optional array of labels with title and subtitle for each slide. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #000000 | Background color of the carousel container (hex, rgb, or hsl). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
progressBarBgColor | string | rgba(255,255,255,0.3) | Background color of progress bars (hex, rgb, or hsl). |
progressBarFillColor | string | #ffffff | Fill color of progress bars (hex, rgb, or hsl). |
progressBarHeight | string | 0.25rem | Height of progress bars (CSS value). |
progressBarGap | string | 0.25rem | Gap between progress bars (CSS value). |
titleColor | string | #ffffff | Color of slide titles (hex, rgb, or hsl). |
subtitleColor | string | rgba(255,255,255,0.7) | Color of slide subtitles (hex, rgb, or hsl). |
overlayGradientFrom | string | rgba(0,0,0,0.8) | Start color of the overlay gradient (hex, rgb, or hsl). |
overlayGradientTo | string | transparent | End color of the overlay gradient (hex, rgb, or hsl). |
autoPlayInterval | number | 100 | Auto-play interval in milliseconds. |
progressIncrement | number | 2 | Progress increment per interval (percentage). |
height | string | 24rem | Height of the carousel container (CSS value). |
width | string | 16rem | Width of the carousel container (CSS value). |