react-multi-carousel

Lightweight fully customizable React carousel component supports multiple items and SSR(Server-side rendering) with typescript.

The technical details of this carousel can be found at www.w3js.com -> react-multi-carousel.

Features.

• Server-side rendering
• Infinite mode
• Custom animation
• AutoPlay mode
• Responsive
• Swipe to slide
• Mouse drag to slide
• Keyboard control to slide
• Multiple items
• Show / hide arrows
• Custom arrows / control buttons
• Custom dots
• Custom styling
• Accessibility support

Bundle size

Bundle-size. 2.5kB

Demo.

Demo and documentation can be found at here.

Demo for the SSR https://react-multi-carousel.now.sh/

Try to disable JavaScript to test if it renders on the server-side.

Codes for SSR at github.

Codes for the documentation at github.

Install

$ npm install react-multi-carousel --save

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

Technical approach.

Detailed Can be found in this blog post at w3js.

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).

Based based on the device type, we decided how many items we are showing in the Carousel.

For example, we want to show 3 items at the same time on desktop (screen size 1024 - 2000px possibily) and 2 items on tablet(700px - 1024px) and 1 item on mobile. ---> this can be achieved through user-agent detection.

More detailed can be found in this blog post here.

Codes for SSR at github.

• Demo for the SSR are at here
• Try to disable JavaScript to test if it renders on the server-side.

Usage

import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

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
  swipeable={false}
  draggable={false}
  showDots={true}
  responsive={responsive}
  ssr={true} // means to render carousel on server-side.
  slidesToSlide={2}
  infinite={true}
  autoPlay={this.props.deviceType !== 'mobile' ? true : false}
  autoPlaySpeed={1000}
  keyBoardControl={true}
  customTransition='all .5'
  transitionDuration={500}
  containerClass='carousel-container'
  removeArrowOnDeviceType={['tablet', 'mobile']}
  deviceType={this.props.deviceType}
  dotListClass='custom-dot-list-style'
  itemClass='carousel-item-padding-40-px'
>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</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.

You custom arrows will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.

An Example.

Code

const CustomRightArrow = ({ onClick, ...rest }) => {
  const { onMove, state: {  currentSlide, deviceType }  } = rest;
  // onMove means if dragging or swiping in progress.
  return <button onClick={() => onClick()} />
}
<Carousel customRightArrow={<CustomRightArrow />} />

Custom button group.

This is very useful if you don't want the dots, or arrows and you want to fully customize the control functionality and styling yourself.

Example.

Code

const ButtonGroup = ({ next, previous, goToSlide ...rest }) => {
  const { carouselState: { currentSlide } } = rest;
  return (
    <div className="carousel-button-group"> // remember to give it position:absolute
      <ButtonOne className={currentSlide === 0 : 'disable' : ''} onClick={() => previous()} />
      <ButtonTwo onClick={() => next()} />
      <ButtonThree onClick={() => goToSlide(currentSlide + 1)}> Go to any slide </ButtonThree>
    </div>
  );
};
<Carousel arrows={false} customButtonGroup={<ButtonGroup />}>
  <ItemOne>
  <ItemTwo>
</Carousel>

Custom dots.

You can pass your own custom dots to replace the default one

You custom dots will receive a list of props/state that's passed back by the carousel such as the currentSide, is dragging or swiping in progress.

An Example.

Code

const CustomDot = ({ onClick, ...rest }) => {
  const { onMove, index, carouselState: { currentSlide, deviceType }  } = rest;
  // onMove means if dragging or swiping in progress.
  return <button className={currentSlide === index ? 'active' : 'inactive'} onClick={() => onClick()} />
}
<Carousel shouldShowDots customDot={<CustomDot />} />

ParitialVisibile props.

Shows the next / previous items paritially, this is very useful if you want to indicate to the users that this carousel component is swipable, has more items behind it.

paritialVisibile = 'right' means showing only next items paritially paritialVisibile = {true} means showing both.

An Example.

const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    paritialVisibilityGutter: 40 // this is needed to tell the amount of px that should be visible.
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    paritialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    paritialVisibilityGutter: 30 // this is needed to tell the amount of px that should be visible.
  }
}
<Carousel paritialVisibile='right' responsive={responsive}>
  <ItemOne />
  <ItemTwo />
</Carousel>

afterChange callback.

This is a callback function that is invoked each time when there has been a sliding.

An Example.

<Carousel afterChange={(previousSlide, { currentSlide, onMove }) => {
    doSpeicalThing()
  }}>
</Carousel>

beforeChange call back

This is a callback function that is invoked each time before a sliding.

An Example.

<Carousel beforeChange={(nextSlide, { currentSlide, onMove }) => {
    doSpeicalThing()
  }}>
</Carousel>

Combine beforeChange and nextChange, real usage.

They are very useful in the following cases:

• The carousel item is clickable, but you don't want it to be clickable while the user is dragging it or swiping it.

<Carousel beforeChange={() => this.setState({ isMoving: true })} afterChange={() => this.setState({ isMoving: false })}>
  <a onClick={(e) => {
    if(this.state.isMoving) {
      e.preventDefault()
    }
    }} href='https://w3js.com'>Click me</a>
</Carousel>

• Preparing for the next slide.

<Carousel beforeChange={(nextSlide) => this.setState({ nextSlide: nextSlide })}>
  <div>Initial slide</div>
  <div onClick={() => {
    if(this.state.nextSlide === 1) {
      doVerySpecialThing();
    }
    }}>Second slide</div>
</Carousel>

Using ref.

<Carousel ref={(el) => (this.Carousel = el)} arrows={false} responsive={responsive}>
  <ItemOne />
  <ItemTwo />
</Carousel>
<button onClick={() => {
    const nextSlide = this.Carousel.state.currentSlide + 1;
     // this.Carousel.next()
     // this.Carousel.goToSlide(nextSlide)
  }}>Click me</button>

Specific Props

Contribute

Submit an issue for feature request or submit a pr.

Locale development.

• cd app
• npm install
• npm run dev