🎠
nice-react-carousel
A nice carousel for your React project.
Try it
https://nice-react-carousel.netlify.com
Install it
npm i nice-react-carousel
yarn add nice-react-carousel
Use it
;
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 = { return <span>active ? 'x': ''</span> ; }
- Responsive (Mobile first) :
responsive = breakpoint:800 space: 10 itemsWidth: 200 breakpoint:1200 space: 15 itemsWidth: 250 dots: false
Help ?
Open an issue for all your question, request or anything else just here :