An extremely niche yet beautiful component provided by React and Material-UI is the easy to use carousel. This carousel has a simple structure and can be customized in many different ways to best suit your project.
The installation and import for the carousel is shown below, along with necessary dependencies to go with it. The installations are different depending on which version of mui you are using, but the import is the same. Please check more versions if you are not using mui v5..
npm install npm install react-material-ui-carousel
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles
import Carousel from 'react-material-ui-carousel';
First, knowing the basic structure of the carousel is important to knowing how to utilize each component. Below is a basic use of the carousel. As you can see, the structure is extremely simple. The content is enveloped inside the carousel tag, and no other components like the navigation buttons and bottom bar are automatically included in the render. The information that goes into the carousel can also be structured easily, like an array that the carousel parses through.
import React from 'react';
import Carousel from 'react-material-ui-carousel'
export const Example() {
var items = [ {
name: "Random Name #1",
description: "description here 1"
},
{
name: "Random Name #2",
description: "description here 2"
}]
return (
<Carousel>
{items.map( (item, i) => <Item key={i} item={item} /> )}
</Carousel>
)
}
It is important to make the carousel customized and specific to your project. To do so, you need to understand the different props that can be adjusted. Below is a chart of these props and how to customize them. The props are difficult to override, so it is important to understand how they work.
| Prop Name | Description | Syntax |
| NextIcon | The icon clicked to go to the next slide. Can be replaced with an icon or img. | NextIcon={} |
| PrevIcon | The icon clicked to go back to the previous slide.Can be replaced with an icon or img. | NextIcon={} |
| navButtonsProps | Style the navigation buttons in detail e.g.:
| navButtonsProps={{ Style: {} }} |
| navButtonsWrapperProps | Adjusts the location of the navigation buttons in relation to the entire carousel, e.g.:
| navButtonsWrapperProps={{ Style: {} }} |
| fullHeightHover | A boolean value to define the size of the buttons wrapper in relation to the button element. | fullHeightHover={} |
| IndicatorIcon | Icon that is displayed at the bottom for which card you’re on. | IndicatorIcon={} |
| activeIndicatorIconButtonProps | Determine styling of the active indicator e.g.:
| activeIndicatorButtonProps={{ style:() }} |
| indicatorIconButtonProps | Determine styling of all indicator icons in relation to one another e.g.
| indicatorIconButtonProps={{ style: {} }} |
| indicatorContainerProps | Determine the styling of the indicator container in relation to the rest of the carousel | indicatorContainerProps={{ style:{} }} |
The navigation buttons can be customized directly, although be sure to include all of the necessary fields as shown below, such as onClick. Please visit Package Galaxy to see practical examples of the carousel props.
import {Button} from '@mui/material';
<Carousel
NavButton={({onClick, className, style, next, prev}) => {
// Other logic
return (
<Button onClick={onClick} className={className} style={style}>
{next && "Next"}
{prev && "Previous"}
</Button>
)
}}
>
{...}
</Carousel>
Please review Learus blog for a live demo of the carousel in use. The carousel can be customized for many uses and adds a professional and stylish dynamic to one’s website. For more information on React elements check other articles on our website.
