2.0.3 • Published 27 days ago
react-carousel-ts v2.0.3
React-carousel-
Ultra-light carousel component for React
Installation
Install the package using npm:
npm i -D react-carousel-ts
Usage
import { Carousel, CarouselProps } from '@/carousel';
import cls from '@/app/styles/index.module.scss';
export const App = () => {
const data = [
<div className={cls.example}>1</div>,
<div className={cls.example}>2</div>,
<div className={cls.example}>3</div>,
];
const props: CarouselProps = {
className: cls.carousel,
items: data,
speed: 500,
showDots: false,
autoplay: true,
autoplaySpeed: 1500,
visibleItemCount: 2,
};
return (
<div className={cls.App}>
<Carousel {...props} />
</div>
);
};
Props
Name | Type | Default | Description |
---|---|---|---|
items | CarouselListItems | [] | Items to display. |
className | string | '' | CSS class for styling. |
showDots | boolean | true | Shows navigation dots. |
showArrows | boolean | true | Shows navigation arrows. |
speed | number | 500 | Transition speed in ms. |
autoplay | boolean | false | Enables automatic cycling. |
autoplaySpeed | number | 4000 | Speed of autoplay in ms. |
visibleItemCount | number | 1 | Number of visible items. |
width | string \| number | '600px' | Width of the carousel. |
height | string \| number | '400px' | Height of the carousel. |