• Stars
    star
    431
  • Rank 100,852 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel

Build Status Standard - JavaScript Style Guide

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.

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.

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.

* required property

Example

Edit material-auto-rotating-carousel example

License

The files included in this repository are licensed under the MIT license.

More Repositories

1

material-ui-chip-input

A chip input field using Material-UI.
JavaScript
739
star
2

mdi-material-ui

Material-UI SvgIcon components for Material Design Icons.
JavaScript
328
star
3

material-ui-search-bar

Material design search bar
JavaScript
260
star
4

material-ui-image

Material style image with loading animation
JavaScript
214
star
5

material-ui-time-picker

A time picker for Material-UI.
JavaScript
127
star
6

material-ui-rating

Rate something with style.
JavaScript
88
star
7

material-ui-snackbar-provider

A convenient way to use material-ui's snackbars.
JavaScript
81
star
8

material-ui-password-field

A password field using Material-UI.
JavaScript
58
star
9

material-ui-fullscreen-dialog

A fullscreen dialog for Material-UI.
JavaScript
58
star
10

electron-react-material-ui

Quick boilerplate for an electron react app with material ui
JavaScript
37
star
11

material-ui-toggle-icon

An animated toggle icon for Material-UI.
JavaScript
35
star
12

crypto-trading-bot

A trading bot that does what you order him to do (use at your own risk)
TypeScript
30
star
13

material-ui-bottom-sheet

Bottom sheets slide up from the bottom of the screen to reveal more content.
JavaScript
29
star
14

codify

TypeScript
17
star
15

material-ui-feature-discovery-prompt

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.
JavaScript
17
star
16

material-ui-settings-panel

A settings component in material ui style inspired by google admin console and google inbox.
JavaScript
16
star
17

material-ui-dots

Just some animated dots for pagination.
JavaScript
14
star
18

material-ui-file-dropzone

File selection components with drag'n'drop support for Material-UI.
JavaScript
11
star
19

react-hero-animation

A small react library for hero animations.
JavaScript
8
star
20

react-props-md-table

A markdown table generator for React component props.
JavaScript
6
star
21

material-ui-share

Material design web share component
JavaScript
5
star
22

materialdesign-webfont-material-ui

FontIcon components for Material Design Icons font icons.
JavaScript
4
star
23

mctext-react

A React component to display Minecraft-formatted text.
JavaScript
4
star
24

mui-styleguidist-wrapper

A wrapper of react-styleguidist for Material-UI components.
JavaScript
3
star
25

soundcloud-searcher

Search soundcloud tracks by name. Filter by genre
JavaScript
2
star
26

module-loader

High Cohesion, Loose Coupling with ease
JavaScript
2
star
27

McTextBlock

A WPF component for rendering Minecraft formatted text.
C#
1
star