0.0.1 • Published 3 years ago

@sean_dorr/react-responsive-carousel-2 v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

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

\

PropertyDescriptionTypeDefault
childrenItems to be displayed in the carousel - use \node.isRequired-
classNameCustom class for stylingstringundefined
idCustom id for stylingstringundefined
styleCustom inline stylingobjectundefined
numberOfItemsShownNumber of items you want to be visible in the carouselnumber | {xs: number, sm: number, md: number, lg: number, xl: number}{xs: 1, sm: 2, md: 3, lg: 4, xl: 5}
carouselItemHeightHeight of items in the carouselnumber400
gapSpacing between carousel itemsnumber20

\

PropertyDescriptionTypeDefault
childrenContent to be displayed inside of the \any-
classNameCustom class for stylingstringundefined
idCustom id for stylingstringundefined
styleCustom inline stylingobjectundefined
onClickSet the handler to handle click eventobjectundefined
colorDefine a background-color for the \functionundefined

Example

<Carousel
  numberOfItemsShown={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
  carouselItemHeight={400}
  gap={20}
>
  <CarouselItem />
</Carousel>