UNPKG

@wix/design-system

Version:

@wix/design-system

76 lines (72 loc) 2.62 kB
### 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