Package Exports
- react-material-ui-carousel
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-material-ui-carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Material UI Carousel
Description
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.
Live Demo
Take a look at this interactible Live Demo
Installation
npm install react-material-ui-carousel --save
Usage Example
import 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>
)
}
Props
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 |
License
The MIT License.