Material Auto Rotating Carousel

Introduce users to your app with this Material-style carousel.
Alternatives To Material Auto Rotating Carousel
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
React Slick11,2209,1971,45319 days ago115April 17, 2022474mitJavaScript
React carousel component
Keen Slider4,217676 days ago104July 05, 202379mitTypeScript
The HTML touch slider carousel with the most native feeling you will get.
Splide3,821625 months ago150November 09, 202244mitTypeScript
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
Embla Carousel3,586155a day ago91July 11, 202313mitTypeScript — A lightweight carousel library with fluid motion and great swipe precision.
React Image Gallery3,506517119a month ago114July 30, 202311mitJavaScript
React carousel image gallery component with thumbnail support 🖼
Nuka Carousel2,9394911516 days ago139May 08, 202335otherTypeScript
Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
React Awesome Slider2,601424810 months ago45February 21, 202076mitJavaScript
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 Carousel2,4857942422 months ago122March 03, 202220mitTypeScript
React.js Responsive Carousel (with Swipe)
Egjs Flicking2,4253162 months ago119August 02, 202349mitTypeScript
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
React Images2,2881,1292142 years ago77April 29, 202149mitJavaScript
🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
Alternatives To Material Auto Rotating Carousel
Select To Compare

Alternative Project Comparisons

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.



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


Edit material-auto-rotating-carousel example


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

Popular Carousel Projects
Popular Reactjs Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Material Ui
Material Design
Inline Styles