Demo: https://petrhuli.cz/carousel/
In the App.tsx file you can find example usage.
The main component. Props:
- dataLengthProp: number - The length of list to display in carousel
- children: React.ReactNode
Inner wrapper for main caousel section. Props:
- children?: JSX.Element | JSX.Element[];
- style?: React.CSSProperties;
- className?: string;
The single carousel item. Props:
- index: number;
- image?: string;
- title?: string;
- children?: React.ReactNode;
- className?: string;
- animation?: 'zoomIn' | 'slide';
- translateRatio?: number;
Side control button. Props:
- side: 'left' | 'right';
- onClick?: () => void;
- style?: React.CSSProperties;
- children?: React.ReactNode;
- className?: string;
The control section to select specific item. Props:
- onSlideChange?: (index: number) => void;
- wrapperStyle?: React.CSSProperties;
- itemStyle?: React.CSSProperties;
- itemClass?: string;
- activeClass?: string;
- wrapperClass?: string;
In the project directory, you can run:
This project was bootstrapped with Create React App.