https://nice-react-carousel.netlify.com
npm i nice-react-carousel
yarn add nice-react-carousel
import Carousel from 'nice-react-carousel';
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 |
customNextArrow | ReactElement |
Custom the next button. | |
customPrevArrow | ReactElement |
Custom the previous button. | |
responsive | Object {breakpoint: number, ...} |
Change properties depending on the breakpoint (Mobile first). |
<Carousel mode="normal" itemsBySlide={2} dots>
<div>Slider 1</div>
<div>Slider 2</div>
<div>Slider 3</div>
</Carousel>
- 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,
},
]}
Open an issue for all your question, request or anything else just here :