@wix/design-system/dist/types/CarouselWIP/CarouselWIP.types.d.ts

@wix/design-system

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