Nice-react-carousel NPM

Try it

https://nice-react-carousel.netlify.com

Install it

npm i nice-react-carousel

yarn

yarn add nice-react-carousel

Use it

import Carousel from 'nice-react-carousel';

Documentation

Option	Type	Default	Description
mode	`string` ('normal', 'center' 'variableWidth')	'normal'	How items should be displayed.
itemsBySlide	`number`	1	Items number for each slide. Works only with 'normal' mode.
space	`number`	10	Space between each item (px).
itemsWidth	`number`	100	Width of each item(px). Works only with 'variableWidth' mode.
arrows	`boolean`	true	Should show the arrow buttons (previous/next) when it's possible.
dots	`function \| boolean`	false	On / Off the dots. Or custom your own dots (See the example below).
customNextArrow	`ReactElement`		Custom the next button.
customPrevArrow	`ReactElement`		Custom the previous button.
responsive	`Object`{breakpoint: number, ...}		Change properties depending on the breakpoint (Mobile first).

Basic example

<Carousel mode="normal" itemsBySlide={2} dots>
  <div>Slider 1</div>
  <div>Slider 2</div>
  <div>Slider 3</div>
</Carousel>

Props usage examples

Custom dots :

  dots = {active => {
    return (
      <span>[{active ? 'x': ''}]</span>
    );
  }}

Responsive (Mobile first) :

  responsive = {[
    {
      breakpoint:800,
      space: 10,
      itemsWidth: 200
    },
    {
      breakpoint:1200,
      space: 15,
      itemsWidth: 250,
      dots: false,
    },
  ]}