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.

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	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

License

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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
React Slick	11,220	9,197	1,453	19 days ago	115	April 17, 2022	474	mit	JavaScript
React carousel component
Keen Slider	4,217		67	6 days ago	104	July 05, 2023	79	mit	TypeScript
The HTML touch slider carousel with the most native feeling you will get.
Splide	3,821		62	5 months ago	150	November 09, 2022	44	mit	TypeScript
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
Embla Carousel	3,586	1	55	a day ago	91	July 11, 2023	13	mit	TypeScript
www.embla-carousel.com — A lightweight carousel library with fluid motion and great swipe precision.
React Image Gallery	3,506	517	119	a month ago	114	July 30, 2023	11	mit	JavaScript
React carousel image gallery component with thumbnail support 🖼
Nuka Carousel	2,939	491	151	6 days ago	139	May 08, 2023	35	other	TypeScript
Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
React Awesome Slider	2,601	42	48	10 months ago	45	February 21, 2020	76	mit	JavaScript
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
React Responsive Carousel	2,485	794	242	2 months ago	122	March 03, 2022	20	mit	TypeScript
React.js Responsive Carousel (with Swipe)
Egjs Flicking	2,425	3	16	2 months ago	119	August 02, 2023	49	mit	TypeScript
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
React Images	2,288	1,129	214	2 years ago	77	April 29, 2021	49	mit	JavaScript
🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS