react-material-ui-carousel

If you are using Material UI version 4, install the specific version 2 of the carousel and the corresponding MUI 4 packages.

npm install react-material-ui-carousel@v2 --save
npm install @material-ui/core
npm install @material-ui/icons

For projects using MUI 5 that require the version 2 branch of the carousel, use the v2mui5 tag.

npm install react-material-ui-carousel@v2mui5 --save

Install the core carousel package via npm. Note that you must also have Material UI dependencies installed for the component to function.

npm install react-material-ui-carousel --save

# Required Material UI dependencies
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles

The carousel indicators (bullets) can be customized using four props:

• IndicatorIcon: A ReactNode (JSX or string) or an array of ReactNodes to define the icon for each indicator.
• indicatorIconButtonProps: Styles for all indicator buttons.
• activeIndicatorIconButtonProps: Styles specifically for the currently active indicator.
• indicatorContainerProps: Styles for the container holding the indicators.

<Carousel
    IndicatorIcon={<HomeIcon />}
    indicatorIconButtonProps={{
        style: { padding: '10px', color: 'blue' }
    }}
    activeIndicatorIconButtonProps={{
        style: { backgroundColor: 'red' }
    }}
    indicatorContainerProps={{
        style: { marginTop: '50px', textAlign: 'right' }
    }}
>
    {/* slides */}
</Carousel>

You can customize the default navigation buttons using several props. Note that styles provided via these props are merged with existing styles; to remove a default style, you must explicitly unset or override it.

<Carousel
    NextIcon={<MyCustomIcon />}
    PrevIcon={<MyCustomIcon />}
    fullHeightHover={false}
    navButtonsProps={{ 
        style: { backgroundColor: 'cornflowerblue', borderRadius: 0 } 
    }}
    navButtonsWrapperProps={{ 
        style: { bottom: '0', top: 'unset' } 
    }}
    NextIcon='next'
    PrevIcon='prev'
>
    {/* slides */}
</Carousel>

To use the carousel, wrap your slide items (any JSX elements) inside the <Carousel> component. Each child of the <Carousel> represents a single slide.

import React from 'react';
import Carousel from 'react-material-ui-carousel';
import { Paper, Button } from '@mui/material';

function Example() {
    const items = [
        { name: "Item 1", description: "Description 1" },
        { name: "Item 2", description: "Description 2" }
    ];

    return (
        <Carousel>
            {items.map((item, i) => (
                <Paper key={i}>
                    <h2>{item.name}</h2>
                    <p>{item.description}</p>
                    <Button>Check it out!</Button>
                </Paper>
            ))}
        </Carousel>
    );
}

The <Carousel> component provides next and prev props that act as callbacks when the user navigates. These functions receive the index of the new slide and the index of the previous slide.

<Carousel
    next={(next, active) => console.log(`we left ${active}, and are now at ${next}`)}
    prev={(prev, active) => console.log(`we left ${active}, and are now at ${prev}`)}
>
    {/* slides */}
</Carousel>

You can control the visual transition and automatic playback of the carousel using the following props:

• animation: Set to either `

Indicators (bullet points) can be customized using the following props:

• IndicatorIcon: A ReactNode to display inside the indicator IconButtons.
• indicatorContainerProps: Customizes the container/wrapper for the indicators. Accepts {className: string, style: React.CSSProperties}.
• indicatorIconButtonProps: Customizes the non-active indicator buttons.
• activeIndicatorIconButtonProps: Customizes the active indicator button.

All indicator props use the CarouselNavProps interface, allowing for className and style overrides.

The library provides a default export of the Carousel component. You can import it directly from the package to integrate a Material UI-based carousel into your React application.

import Carousel from 'react-material-ui-carousel';