0.0.1 • Published 3 years ago
@sean_dorr/react-responsive-carousel-2 v0.0.1
React Responsive Carousel
In order to view the project:
Clone the GitHub project in your terminal:
git clone https://github.com/seandorr/react-responsive-carousel.git
Enter the project directory:
cd react-responsive-carousel
Playing with the demo:
Install the dependencies with:
yarn install
Now start the dev server with:
yarn start
Open http://localhost:3000 to view it in the browser.
Customizing the Carousel
\
Property | Description | Type | Default |
---|---|---|---|
children | Items to be displayed in the carousel - use \ | node.isRequired | - |
className | Custom class for styling | string | undefined |
id | Custom id for styling | string | undefined |
style | Custom inline styling | object | undefined |
numberOfItemsShown | Number of items you want to be visible in the carousel | number | {xs: number, sm: number, md: number, lg: number, xl: number} | {xs: 1, sm: 2, md: 3, lg: 4, xl: 5} |
carouselItemHeight | Height of items in the carousel | number | 400 |
gap | Spacing between carousel items | number | 20 |
\
Property | Description | Type | Default |
---|---|---|---|
children | Content to be displayed inside of the \ | any | - |
className | Custom class for styling | string | undefined |
id | Custom id for styling | string | undefined |
style | Custom inline styling | object | undefined |
onClick | Set the handler to handle click event | object | undefined |
color | Define a background-color for the \ | function | undefined |
Example
<Carousel
numberOfItemsShown={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
carouselItemHeight={400}
gap={20}
>
<CarouselItem />
</Carousel>
0.0.1
3 years ago