Use an Auto-rotating Carousel to Deliver Your App’s Elevator Pitch

Whether you are working on a website for someone else’s business or you are trying to promote your own app, you will need to find a way to quickly grab your viewer’s attention and convince them to take the next step. While trying to come up with an effective way to do so in the landing page for a project I was working on, I came across an auto-rotating carousel from material-UI that is customizable and proved to be a great opener. I liked this carousel in particular because, regardless of styling, it blurs the rest of the screen upon opening, forcing your viewer to pay attention to nothing other than your slides. It was not particularly hard to incorporate, but I thought I could save a few of you some time and go through all the steps, including the few that gave me a little trouble.

If you haven’t used material-UI before, you can get started by running the following command on your console:

npm install @material-ui/core

Once you have taken that step, you can continue by running the following two commands on your terminal:

npm i --save material-auto-rotating-carousel
npm i --save react-swipeable-views

If you get an error while running these commands, you may need to download the legacy version, and you can do that by adding the following line at the end of each of those commands:

--legacy-peer-deps

After installing those dependencies, you are now ready to create a new component and import the carousel to be displayed. You will need to import the carousel, a slide, and a button component from material-UI as shown below:

You will then need to set your default state as an object with a key of open and a value of true. Doing so using the React hook useState makes the rest of the code easier and allows you to use a functional component instead of a class component. If you are new to React hooks, useState is fairly easy to pick up, and you can see a quick and simple example of it here:

https://juancarlosmezadelatorre.medium.com/react-from-class-components-to-hooks-4cc787290262

If you are in a rush and are not familiar with useState, I will provide you with the code necessary to do such setup so that you are able to follow along with the rest:

Using useState from React

After setting your state up this way, you can render your carousel with as many slide components nested inside of it as you need. The carousel can take several props for customizing but none of them are required, whereas the slides will require the props of media, subtitle, and title. You can replicate the carousel shown in the opening picture by having your functional component return the following:

The button on line 15 is optional and you should only include it if you want your viewer to be able to see the slides again after pressing the “get started” button rendered by the label prop on line 17. As you can see, you can do basic CSS styling in line, and you can add as many slides as you need. As mentioned before, the carousel component does not require any props, but you might want to change the default interval in between slide transitions as I found the 3-second (3000 ms) default value to be a little fast to deliver a message. You are able to override the inline styling and customize further by adding different props to the carousel component as well. To see a full list of acceptable props and their roles, be sure to visit their github homepage and learn more about their npm package here. I sincerely hope you found this carousel useful and I hope this article prevented you from getting stuck at any point during its implementation.