react-multi-carousel

React carousel component supports multiple items and SSR with typescript.

NPM

NPM.

Install

$ npm install react-multi-carousel --save

How the SSR mode works?

The current most common solution is to detect the device type of the user based on the user agent. (server-side or client-side).

The end result will either be "mobile", "tablet" or "desktop", so based on these device types, we decided how many items we are showing in the Carousel.

Codes for SSR are at here.

Demo for the SSR are at here

Demo.

Demo and documentation can be found at here.

Codes are at here.

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>

Custom Arrows.

You can pass your own custom arrows to make it the way you want, the same for the position. For example, add media query for the arrows to go under when on smaller screens.

const CustomRightArrow = ({ onClick }) => <button onClick={() => onClick()} />
<Carousel customRightArrow={<CustomRightArrow />} />

General Props

responsive: responsiveType;
deviceType?: string;
forSSR?: boolean;
slidesToSlide: number;
disableDrag?: boolean;
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;
customTransition?:string;
transitionDuration?: number;
// if you are using customTransition, make sure to put the duration here.
// for example, customTransition="all .5"  then put transitionDuration as 500.
// this is needed for the resizing to work.

Specific Props