@invenso/material-rotating-carousel
v3.2.2
Published
Introduce new users to your app with this material style carousel
Downloads
93
Maintainers
Readme
Material AutoRotatingCarousel
So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Material design guidelines have a solution: Displaying the top benefits in a beautiful auto-rotating carousel!
This project implements such a carousel for Material-UI. Visit the styleguide for an interactive demo.
Installation
npm i --save material-auto-rotating-carousel
npm i --save react-swipeable-views
Note: This is the version for Material-UI 1.0.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our legacy version.
AutoRotatingCarousel Properties
|Name |Type |Default |Description
|----------------|------------|------------|--------------------------------
|autoplay | bool
| true
| If false
, the auto play behavior is disabled.
|ButtonProps | object
| | Properties applied to the Button element.
|classes | object
| | Object for customizing the CSS classes.
|containerStyle | object
| | Override the inline-styles of the carousel container.
|hideArrows | function
| | If true
, the left and right arrows are hidden in the desktop version.
|interval | integer
| 3000
| Delay between auto play transitions (in ms).
|label | string
| | Button text. If not supplied, the button will be hidden.
|landscape | bool
| | If true
, slide will adjust content for wide mobile screens.
|mobile | bool
| false
| If true
, the screen width and height is filled.
|ModalProps | object
| | Properties applied to the Modal element.
|open | bool
| false
| Controls whether the AutoRotatingCarousel is opened or not.
|onChange | function
| | Fired when the index changed. Returns current index.
|onClose | function
| | Fired when the gray background of the popup is pressed when it is open.
|onStart | function
| | Fired when the user clicks the getting started button.
|footer | node
| | Object to display in the bottom half.
|currentIndex | number
| | Set the current index of the carousel.
Slide Properties
|Name |Type |Default |Description
|-----------------------|-----------|-------------|--------------------------------
|classes | object
| | Object for customizing the CSS classes.
|landscape | bool
| | If true
, slide will adjust content for wide mobile screens (automatically set by AutoRotatingCarousel
).
|media* | node
| | Object to display in the upper half.
|mediaBackgroundStyle | object
| | Override the inline-styles of the media container.
|mobile | bool
| | If true
, the screen width and height is filled (automatically set by AutoRotatingCarousel
).
|style | object
| | Override the inline-styles of the slide.
|subtitle* | string
| | Subtitle for the slide.
|title* | string
| | Title for the slide.
|noFooter | bool
| | If true
, the slide will not have a footer.
* required property
Example
License
The files included in this repository are licensed under the MIT license.
Build and deploy
npm run prepublish
npm publish