react-multi-carousel/README.md

## Install

# react-multi-carousel

## Install

```
$ npm install react-multi-carousel --save
```

### Limitations.

```
It works if you don't ask for too much.
```

## Demo.

Demo can be found at [here](https://nextjs-1ee6wb4r6.now.sh).
Note: When you go to the responsive mode in chrome debugger, this demo will assume that you are on a tablet or mobile device because of a npm package i am using, so the resize might not work well because of this.

Codes is at [here](https://github.com/YIZHUANG/react-multi-carousel/blob/master/examples/ssr/pages/index.js).


## Examples

```
const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};
<Carousel
  disableSwipeOnMobile
  disableDrag
  responsive={responsive}
  forSSR
  slidesToSlide={2}
  infinite={true}
  className='test'
  removeArrowOnDeviceType={['tablet', 'mobile']}
  deviceType={this.props.deviceType}
>
  {fakerData.map(card => {
    return <Card {...card} />;
  })}
</Carousel>
```

## General Props
```
responsive: responsiveType;
deviceType?: string;
forSSR?: boolean;
slidesToSlide?: number; // number of slides on each slide.
disableDrag?: boolean; // for desktop
removeArrow?: boolean;
disableSwipeOnMobile?: boolean;
removeArrowOnDeviceType?: string | Array<string>;
children: React.ReactNode | null;
customLeftArrow?: React.ReactElement<any> | null;
customRightArrow?: React.ReactElement<any> | null;
infinite?: boolean;
contentClassName?: string;
itemClassName?:string;
containerClassName?: string;
transition?:string;
```

## Specific Props

| Name                 | Type              | Default               | Description                                                              |
| :------------------- | :---------------- | :-------------------- | :----------------------------------------------------------------------- |
| `responsive`              | `Object`         | `{}`               | How many items to show on each breakpoint.                                                                   |
| `deviceType`            | `string` | `none`                 | Only pass this when use for server-side rendering, what to pass can be found in the example folder.                                                                    |
| `forSSR`           | `bool`            | `false`               | For SSR |
| `slidesToSlide`   | `number`          | `1` | How many slides to slide.                                                       |