A simple and powerful carousel for React.
yarn add @chuck-durst/react-carousel or npm i -s @chuck-durst/react-carousel
react-carousel has been designed to work on both mobile and desktop. It comes with a lot of configurations to make it feet to any type of design.
react-carousel works with the background-image property which makes it fully responsive!
All you have to do is importing the component to your project and specifying your slides!.
import React from 'react'
import ReactCarousel from '@chuck-durst/react-carousel'
const App = (props) => {
return (
<ReactCarousel slides={ props.slides } />
)
};###checkout the demo for a better example of how to use it!
| Property | Type | Description | Default value |
|---|---|---|---|
| slides | array | Contains yours slides urls. (required) | - |
| className | String | The class name of the main component | ce-carousel |
| showArrows | bool | Defines if the navigation arrows must be showed | true |
| showDots | bool | Defines if the pagination dots must be showed | true |
| autoPlay | bool | Enables the automatic play | false |
| autoPlayDelay | int | The delay between each slide in autoPlay in ms | 5000 |
| slidesSpeed | int | The slides movement speed in ms | 150 |
| isInfinite | bool | Defines if the slider is infinite | true |
| isAnimated | bool | Defines if the slides should be animated | true |
| stopOnHover | bool | Allows you to stop the autoPlay when the component is hovered | false |
| slideNavigation | bool | Allows sliding on mobile and desktop | true |
| allowKeyboard | bool | Allows you to navigate using your keyboard arrows | true |
| customNextArrow | React Element | A custom arrow element (if you need inspiration you can take a look at the original element: src/NextArrow) | - |
| customPrevArrow | React Element | A custom arrow element (if you need inspiration you can take a look at the original element: src/PrevArrow) | - |
| customDots | function | A function used to map the pagination dots which takes two parameters (index, isActive) to let you fully customize the pagination (take a look at the original element: src/Dot) | - |
| beforeChange | function | A callback called before each slides changes (the first parameter corresponds to the index of the current active slide) | - |
| afterChange | function | A callback called after each slides changes (the first parameter corresponds to the index of the new active slide. The second parameter contains the slide direction) | - |
| goToSlide | int | Allows you to go to a defined slide | null |
| backdropColor | string | The component background-color. Can be any css color property | null |
| sliderClassName | string | The className of the slider element | ce-carousel__slider |
| slidesClassName | string | The className of the slides element | ce-carousel__slide |
Take a look at the demo folder if you are stuck! :)
react-carousel is released under the MIT license.
Feel free to contribute to this project if you know how to make it be better.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent