@wix/design-system
Version:
@wix/design-system
76 lines (72 loc) • 2.62 kB
Markdown
### dataHook
- type: string
- description: Applied as data-hook HTML attribute that can be used in the tests
### className
- type: string
- description: Specifies a CSS class name to be appended to the component’s root element.
### children
- type: ReactNode
- description: Any element to render inside
### images
- type: CarouselWIPImage[]
- description: Array of objects where each contains the `src` of an image (in \<img src="your_src" /\>)
### controlsSkin
- type: "standard" | "inverted" | "light" | "transparent"
- description: Sets the skin of the arrow buttons
### showControlsShadow
- type: boolean
- description: Show a shadow for the carousel controls
### infinite
- type: boolean
- description: Images loop endlessly
### initialSlideIndex
- type: number
- description: An index of the slide to start on
### afterChange
- type: (index: number) => void
- description: Index change callback. `index => ...`
### beforeChange
- type: (oldIndex: number, newIndex: number) => void
- description: Index change callback. `(oldIndex, newIndex) => ...`
### controlsPosition
- type: "sides" | "overlay" | "bottom" | "none"
- description: Sets the arrows position
### controlsSize
- type: "medium" | "tiny" | "small"
- description: Sets the arrows position
### controlsStartEnd
- type: "disabled" | "hidden"
- description: Configure the start and end controls to be shown disabled or hidden. Relevant when infinite prop is set to false.
### slidingType
- type: "align-to-start" | "reveal-one" | "reveal-chunk"
- description: Sliding behaviour type for the carousel
### startEndOffset
- type: number
- description: Number of pixels for showing "peeking" cards on the edges of the carousel
### gutter
- type: number
- description: Number of pixels dividing between slides
### sidesGradientColor
- type: string
- description: Color for the gradients on the sides of the carousel
### imagesPosition
- type: string
- description: Sets the images position
### imagesFit
- type: "none" | "fill" | "contain" | "cover" | "scale-down"
- description: Sets the images fit
### autoplay
- type: boolean
- description: Auto-playing of images
### hideDots
- type: boolean
- description: Hide dots
### variableWidth
- type: boolean
- description: 🚧 Variable width of children
### animationDuration
- type: number
- description: Animation duration
### easing
- type: (t: number) => number
- description: Animation function