Special Elements
Depth Parallax
Carousel with depth parallax scrolling effects.
carouselparallaxdepthscroll
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 | string[] | [] | Optional array of labels for each slide (overrides default 'SLIDE 0X' format). |
defaultIndex | number | 0 | Initial active slide index. |
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). |
imageOpacity | number | 0.6 | Opacity of background images (0-1). |
textColor | string | #ffffff | Color of slide labels (hex, rgb, or hsl). |
buttonBgColor | string | rgba(255,255,255,0.2) | Background color of navigation buttons (hex, rgb, or hsl). |
buttonHoverBgColor | string | rgba(255,255,255,0.4) | Background color of buttons on hover (hex, rgb, or hsl). |
buttonTextColor | string | #ffffff | Text/icon color of buttons (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
transitionDuration | number | 0.8 | Duration of slide transitions in seconds. |
height | string | 16rem | Height of the carousel container (CSS value). |
maxWidth | string | 28rem | Maximum width of the carousel container (CSS value). |