A Generic, extendible Carousel UI component for React using Material UI
It switches between given children using a smooth animation.
Provides next and previous buttons.
Also provides interactible bullet indicators.
Take a look at this interactible Live Demo
npm install react-material-ui-carousel --saveimport React from 'react';
import Carousel from 'react-material-ui-carousel'
import {Paper} from '@material-ui/core'
function Example(props)
{
var items = [
{
name: "Random Name #1",
description: "Probably the most random thing you have ever seen!"
},
{
name: "Random Name #2",
description: "Hello World!"
}
]
return (
<Carousel>
{
items.map( item => {
<Item item={item} />
})
}
</Carousel>
)
}
function Item(props)
{
return (
<Paper>
<h2>{props.item.name}</h2>
<p>{props.item.description}</p>
<Button className="CheckButton">
Check it out!
</Button>
</Paper>
)
}| Prop name | Type | Default | Description |
|---|---|---|---|
| className | string | "" | Defines custom class name(s), that will be added to Carousel element |
| autoPlay | boolean | true | Defines if the component will auto scroll between children |
| interval | number | 4000 | Defines the interval in ms between active child changes (autoPlay) |
| indicators | boolean | true | Defines the existence of bullet indicators |
| animation | "fade" | "slide" | "fade" | Defines the animation style of the Carousel |
| timeout | number | {appear? number, enter?: number, exit?: number} | 500 | Defines the duration of the animation |
The MIT License.