### Install react-material-ui-carousel

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Installs the react-material-ui-carousel package using npm. This is the primary package for the carousel component.

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

--------------------------------

### Basic Carousel Usage Example

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Demonstrates a basic implementation of the Carousel component. It maps over an array of items to render them as individual slides within the carousel.

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

function Example(props)
{
    var items = [
        {
            name: "Random Name #1",
            description: "Probably the most random thing you have ever seen!"
        },
        {
            name: "Random Name #2",
            description: "Hello World!"
        }
    ]

    return (
        <Carousel>
            {
                items.map( (item, i) => <Item key={i} item={item} /> )
            }
        </Carousel>
    )
}

function Item(props)
{
    return (
        <Paper>
            <h2>{props.item.name}</h2>
            <p>{props.item.description}</p>

            <Button className="CheckButton">
                Check it out!
            </Button>
        </Paper>
    )
}
```

--------------------------------

### Install react-material-ui-carousel v2 with MUI 5 support

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Installs version 2 of the carousel library with explicit support for Material UI version 5. This ensures compatibility with newer Material UI versions.

```shell
# Version 2 with MUI 5 support
npm install react-material-ui-carousel@v2mui5 --save
```

--------------------------------

### Install Material UI Dependencies

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Installs the necessary Material UI packages required for the carousel component to function. These include core Material UI components, icons, and styling utilities.

```shell
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles
```

--------------------------------

### Install react-material-ui-carousel v2 with MUI 4

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Installs version 2 of the carousel library specifically for compatibility with Material UI version 4. Also installs the corresponding MUI 4 core and icons packages.

```shell
# Version 2 with MUI 4
npm install react-material-ui-carousel@v2 --save
npm install @material-ui/core
npm install @material-ui/icons
```

--------------------------------

### E-Commerce Banner Carousel Example in React

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

An example of creating a multi-item banner carousel, similar to those found on e-commerce sites, using react-material-ui-carousel, MUI Card, Grid, and CardMedia components. It displays product information and images within each carousel item.

```tsx
import React from 'react';
import Carousel from 'react-material-ui-carousel';
import { Card, CardContent, CardMedia, Typography, Grid, Button } from '@mui/material';

type BannerItem = {
  name: string;
  caption: string;
  contentPosition: "left" | "right" | "middle";
  items: { name: string; image: string }[];
};

const bannerItems: BannerItem[] = [
  {
    name: "Electronics",
    caption: "Electrify your life!",
    contentPosition: "left",
    items: [
      { name: "Laptop", image: "https://source.unsplash.com/featured/?laptop" },
      { name: "Smartphone", image: "https://source.unsplash.com/featured/?smartphone" }
    ]
  },
  {
    name: "Home Appliances",
    caption: "Smart home solutions!",
    contentPosition: "middle",
    items: [
      { name: "Washing Machine", image: "https://source.unsplash.com/featured/?appliance" },
      { name: "Vacuum Cleaner", image: "https://source.unsplash.com/featured/?vacuum" }
    ]
  }
];

function Banner({ item }: { item: BannerItem }) {
  return (
    <Card raised style={{ height: 300 }}>
      <Grid container spacing={0} style={{ height: '100%' }}>
        <Grid item xs={4}>
          <CardContent>
            <Typography variant="h5">{item.name}</Typography>
            <Typography variant="body2">{item.caption}</Typography>
            <Button variant="outlined" style={{ marginTop: 16 }}>
              View Now
            </Button>
          </CardContent>
        </Grid>
        {item.items.map((product, index) => (
          <Grid item xs={4} key={index}>
            <CardMedia
              image={product.image}
              title={product.name}
              style={{ height: '100%', minHeight: 200 }}
            />
          </Grid>
        ))}
      </Grid>
    </Card>
  );
}

function ECommerceBanner() {
  return (
    <Carousel
      animation="slide"
      duration={500}
      navButtonsAlwaysVisible
      indicators
    >
      {bannerItems.map((item, index) => (
        <Banner key={index} item={item} />
      ))}
    </Carousel>
  );
}

export default ECommerceBanner;

```

--------------------------------

### Handle Navigation Callbacks in React Carousel

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how to manage carousel navigation events using callback functions: `next`, `prev`, and `onChange`. These functions receive the current and previous slide indices, allowing for actions like logging or triggering other components. The `changeOnFirstRender` prop prevents the `onChange` callback from firing on initial component mount. This example uses react-material-ui-carousel and @mui/material.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function CarouselWithCallbacks() {
  const handleNext = (now: number, previous: number) => {
    console.log(`Next: Moving from slide ${previous} to slide ${now}`);
  };

  const handlePrev = (now: number, previous: number) => {
    console.log(`Previous: Moving from slide ${previous} to slide ${now}`);
  };

  const handleChange = (now: number, previous: number) => {
    console.log(`Changed: Now displaying slide ${now}, was showing ${previous}`);
    // Useful for analytics, lazy loading, or syncing state
  };

  return (
    <Carousel
      next={handleNext}
      prev={handlePrev}
      onChange={handleChange}
      changeOnFirstRender={false} // Don't trigger onChange on initial render
    >
      <Paper style={{ padding: 30, textAlign: 'center' }}>
        <h2>Slide 0</h2>
      </Paper>
      <Paper style={{ padding: 30, textAlign: 'center' }}>
        <h2>Slide 1</h2>
      </Paper>
      <Paper style={{ padding: 30, textAlign: 'center' }}>
        <h2>Slide 2</h2>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Configure Auto-Play and Interval in React Carousel

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Illustrates how to control the automatic sliding behavior of the carousel using the `autoPlay`, `interval`, and `stopAutoPlayOnHover` props. The carousel pauses auto-play when the user hovers over it by default. This example uses react-material-ui-carousel and @mui/material.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function AutoPlayCarousel() {
  return (
    <Carousel
      autoPlay={true}
      interval={3000}           // Slide every 3 seconds
      stopAutoPlayOnHover={true} // Pause when user hovers
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide 1</h2>
        <p>Auto-advances after 3 seconds</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide 2</h2>
        <p>Hover to pause auto-play</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide 3</h2>
        <p>Continues cycling through items</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Advanced Carousel Navigation Customization

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Provides an example of advanced customization for carousel navigation buttons. This includes changing button appearance, position, and text content using props like `navButtonsProps`, `navButtonsWrapperProps`, `NextIcon`, and `PrevIcon`.

```jsx
<Carousel
    fullHeightHover={false}     // We want the nav buttons wrapper to only be as big as the button element is
    navButtonsProps={{          // Change the colors and radius of the actual buttons. THIS STYLES BOTH BUTTONS
        style: {
            backgroundColor: 'cornflowerblue',
            borderRadius: 0
        }
    }} 
    navButtonsWrapperProps={{   // Move the buttons to the bottom. Unsetting top here to override default style.
        style: {
            bottom: '0',
            top: 'unset'
        }
    }}
    NextIcon='next'             // Change the "inside" of the next button to "next"
    PrevIcon='prev'             // Change the "inside of the prev button to "prev"
>
    {...}
</Carousel>
```

--------------------------------

### Customize Carousel Indicators with IndicatorIcon Prop

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Enables customization of the indicator icons displayed below the carousel. The IndicatorIcon prop accepts a React element or an array of React elements to represent different indicator states. This example shows changing the default circle to a 'Home' icon or an image.

```jsx
import Home from '@mui/icons-material/Home';

<Carousel
    IndicatorIcon={<Home/>}
    // OR
    IndicatorIcon={<img src="http://random.com/home"/>}
>
    {...}
</Carousel>
```

--------------------------------

### Basic Carousel Usage in React

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates the fundamental implementation of the React Material UI Carousel by wrapping content items as children. It utilizes default fade animations and enables auto-play functionality out-of-the-box. Dependencies include React, react-material-ui-carousel, and @mui/material components.

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

function BasicCarousel() {
  const items = [
    { name: "Item #1", description: "Description for the first item" },
    { name: "Item #2", description: "Description for the second item" },
    { name: "Item #3", description: "Description for the third item" }
  ];

  return (
    <Carousel>
      {items.map((item, index) => (
        <Paper key={index} elevation={3} style={{ padding: '20px', textAlign: 'center' }}>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
          <Button variant="contained" color="primary">
            Learn More
          </Button>
        </Paper>
      ))}
    </Carousel>
  );
}

export default BasicCarousel;
```

--------------------------------

### Fully Custom Carousel Navigation Buttons (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how to create completely custom navigation buttons for a react-material-ui-carousel using the `NavButton` prop. This provides full control over the rendering, styling, and behavior of the next and previous buttons. Requires the carousel component and Material UI Paper and Button.

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

function CustomNavButtonCarousel() {
  return (
    <Carousel
      NavButton={({ onClick, className, style, next, prev }) => {
        return (
          <Button
            onClick={onClick}
            className={className}
            style={{
              ...style,
              backgroundColor: next ? '#4caf50' : '#f44336',
              color: 'white',
              borderRadius: '20px',
              padding: '10px 20px'
            }}
          >
            {next && "Next Slide"}
            {prev && "Previous Slide"}
          </Button>
        );
      }}
    >
      <Paper style={{ height: 250, padding: 40, textAlign: 'center' }}>
        <h2>Fully Custom Buttons</h2>
        <p>Green "Next" button, Red "Previous" button</p>
      </Paper>
      <Paper style={{ height: 250, padding: 40, textAlign: 'center' }}>
        <h2>Custom Text Labels</h2>
        <p>Complete control over button rendering</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Carousel Props Documentation

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

This section details the available props for the React Material UI Carousel component, covering customization of indicators, icons, and event handlers.

```APIDOC
## Carousel Component Props

### Description
This documentation outlines the props available for the React Material UI Carousel component, allowing for extensive customization of its appearance and behavior.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Props
- **activeIndicatorIconButtonProps** (`{className: string, style: React.CSSProperties} & React.AriaAttributes`) - Optional - Used to customize the **active** indicator `IconButton`. Additive to `indicatorIconButtonProps`.
- **indicatorContainerProps** (`{className: string, style: React.CSSProperties} & React.AriaAttributes`) - Optional - Used to customize the indicators container/wrapper.
- **IndicatorIcon** (`ReactNode`) - Optional - Defines the element inside the indicator `IconButton`s. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (`<img/>`, `<div/>`, ...) you like. Default: `<FiberManualRecordIcon size='small' className={classes.indicatorIcon}/>`.
- **onChange** (`(now?: number, previous?: number) => any`) - Optional - Function that is called **after** internal `setActive()` method. The `setActive()` method is called when the next and previous buttons are pressed, when an indicator is pressed, or when the `index` prop changes. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**. Will be called in conjunction with and **after** `next` and `prev` props if defined. It will not get called in first render, except if `changeOnFirstRender` is defined.
- **changeOnFirstRender** (`boolean`) - Optional - Defines if `onChange` prop will be called when the carousel renders for the first time. In `componentDidMount`. Default: `false`.
- **next** (`(now?: number, previous?: number) => any`) - Optional - Function that is called **after** internal `next()` method. First argument is the child **we are going to display**, while the second argument is the child **that was previously displayed**.

### Request Example
N/A (Component Props)

### Response
#### Success Response (N/A)
N/A (Component Props)

#### Response Example
N/A (Component Props)
```

--------------------------------

### Implement Dynamic and Fixed Height Carousels (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how a carousel can automatically adjust its height based on the active slide's content or be set to a fixed height. The dynamic height feature requires no explicit height prop, while the fixed height is set using the 'height' prop. Dependencies include 'react-material-ui-carousel' and '@mui/material'.

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

function DynamicHeightCarousel() {
  return (
    <Carousel animation="fade" navButtonsAlwaysVisible autoPlay={false}>
      <Paper elevation={10} style={{ height: 200, padding: 20 }}>
        <h1>This item is <span style={{ color: 'cyan' }}>200px</span> high!</h1>
      </Paper>
      <Paper elevation={10} style={{ height: 350, padding: 20 }}>
        <h1>This item is <span style={{ color: 'cyan' }}>350px</span> high!</h1>
      </Paper>
      <Paper elevation={10} style={{ height: 150, padding: 20 }}>
        <h1>This item is <span style={{ color: 'cyan' }}>150px</span> high!</h1>
      </Paper>
    </Carousel>
  );
}

// Fixed height carousel
function FixedHeightCarousel() {
  return (
    <Carousel height={300}>  {/* Fixed 300px height */}
      <Paper style={{ padding: 20 }}>
        <h2>Fixed Height</h2>
        <p>All slides use the same container height</p>
      </Paper>
      <Paper style={{ padding: 20 }}>
        <h2>Consistent Layout</h2>
        <p>No height jumping between slides</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Customize Carousel Indicators with Icons and Styles (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how to customize carousel bullet indicators using custom icons and inline styles. It shows how to set a single icon for all indicators or an array of different icons. Dependencies include 'react-material-ui-carousel' and '@mui/material'.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';
import HomeIcon from '@mui/icons-material/Home';
import StarIcon from '@mui/icons-material/Star';

function CustomIndicatorCarousel() {
  return (
    <Carousel
      IndicatorIcon={<StarIcon />}
      indicatorIconButtonProps={{
        style: {
          padding: '10px',
          color: '#cccccc'
        }
      }}
      activeIndicatorIconButtonProps={{
        style: {
          backgroundColor: '#ffeb3b',
          color: '#ff9800'
        }
      }}
      indicatorContainerProps={{
        style: {
          marginTop: '20px',
          textAlign: 'center'
        }
      }}
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Star Indicators</h2>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Custom Active Styling</h2>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Yellow Active Indicator</h2>
      </Paper>
    </Carousel>
  );
}

// Using an array of different icons for each indicator
function NumberedIndicatorCarousel() {
  const numberIcons = [
    <span>1</span>,
    <span>2</span>,
    <span>3</span>
  ];

  return (
    <Carousel IndicatorIcon={numberIcons}>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide One</h2>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide Two</h2>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Slide Three</h2>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Set Animation Types and Duration in React Carousel

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Shows how to select between 'fade' and 'slide' animations and set the transition duration in milliseconds using the `animation` and `duration` props. It also demonstrates enabling touch swipe gestures for mobile devices with the `swipe` prop. This snippet requires react-material-ui-carousel and @mui/material.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function AnimatedCarousel() {
  return (
    <Carousel
      animation="slide"    // Options: "fade" | "slide"
      duration={800}       // Animation duration in milliseconds
      swipe={true}         // Enable touch swipe on mobile devices
    >
      <Paper style={{ height: 250, padding: 20, backgroundColor: '#64ACC8' }}>
        <h2>Slide Animation</h2>
        <p>Smooth horizontal sliding between items</p>
      </Paper>
      <Paper style={{ height: 250, padding: 20, backgroundColor: '#7D85B1' }}>
        <h2>800ms Duration</h2>
        <p>Slower, more dramatic transitions</p>
      </Paper>
      <Paper style={{ height: 250, padding: 20, backgroundColor: '#CE7E78' }}>
        <h2>Swipe Enabled</h2>
        <p>Works with touch gestures on mobile</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Carousel Next and Previous Button Handlers

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Shows how to implement custom logic for the next and previous buttons in the carousel. The `next` and `prev` props accept callback functions that receive the current and next/previous slide indices.

```jsx
<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}`); }
>
    {...}
</Carousel>

// OR

<Carousel
    next={ () => {/* Do stuff */}
    prev={ () => {/* Do other stuff */}
>
    {...}
</Carousel>
```

--------------------------------

### Carousel Configuration Properties

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

This section details the configurable properties for the React Material UI Carousel component. These properties allow for fine-grained control over its behavior, such as animation styles, autoplay settings, and indexing logic.

```APIDOC
## Carousel Configuration Properties

### Description

This section details the configurable properties for the React Material UI Carousel component. These properties allow for fine-grained control over its behavior, such as animation styles, autoplay settings, and indexing logic.

### Method

N/A (Component Properties)

### Endpoint

N/A (Component Properties)

### Parameters

#### Component Props

- **strictIndexing** (boolean) - Optional - Defines whether the index can be bigger than the children's length. Defaults to `true`.
- **autoPlay** (boolean) - Optional - Defines if the component will auto-scroll between children. Defaults to `true`.
- **stopAutoPlayOnHover** (boolean) - Optional - Defines if auto-scrolling will continue while the mouse is hovering over the carousel. Defaults to `true`.
- **interval** (number) - Optional - Defines the interval in milliseconds between active child changes (when `autoPlay` is enabled). Defaults to `4000`.
- **animation** (string) - Optional - Defines the animation style of the Carousel. Accepts values: `"fade"` or `"slide"`. Defaults to `"fade"`.
- **duration** (number) - Optional - Defines the duration in milliseconds of the animations. Defaults to `500`.

### Request Example

N/A (Component Properties)

### Response

#### Component Behavior

- The component's behavior is determined by the props passed to it.

#### Response Example

N/A (Component Properties)
```

--------------------------------

### Styling Carousel with MUI Sx Prop and ClassName in React

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how to style the react-material-ui-carousel component using both the sx prop for inline styling and a custom CSS class name. This allows for flexible control over the carousel's appearance, including nested element styling.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function StyledCarousel() {
  return (
    <Carousel
      className="my-custom-carousel"
      sx={{
        backgroundColor: '#f5f5f5',
        borderRadius: '16px',
        padding: '10px',
        '& .MuiIconButton-root': {
          backgroundColor: 'rgba(0, 0, 0, 0.3)',
          '&:hover': {
            backgroundColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }}
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Styled with sx</h2>
        <p>Using MUI's sx prop for styling</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Custom Background</h2>
        <p>Rounded corners and padding</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Customize Carousel Indicators with Array of Icons

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Demonstrates using an array of React elements for the IndicatorIcon prop to create a sequence of custom indicators, such as numerical pagination. Each element in the array will be rendered as a distinct indicator.

```jsx
const anArrayOfNumbers = [<img src="http://random.com/one"/>, 
                          <img src="http://random.com/two"/>, 
                          <img src="http://random.com/three"/>
                         ];

<Carousel
    IndicatorIcon={anArrayOfNumbers}
>
    {...}
</Carousel>
```

--------------------------------

### Control Carousel Slide with Index Prop (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Demonstrates how to control the currently displayed slide in a react-material-ui-carousel using the `index` prop. This allows for programmatic navigation. It requires React and the carousel component, with optional Material UI components for buttons.

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

function ControlledCarousel() {
  const [activeIndex, setActiveIndex] = useState(0);
  const totalSlides = 4;

  return (
    <div>
      <Carousel
        index={activeIndex}
        strictIndexing={true}  // Prevents index from exceeding children count
        autoPlay={false}
        onChange={(now) => setActiveIndex(now)}
      >
        {[0, 1, 2, 3].map((num) => (
          <Paper key={num} style={{ height: 200, padding: 20, textAlign: 'center' }}>
            <h2>Slide {num}</h2>
          </Paper>
        ))}
      </Carousel>

      <ButtonGroup variant="contained" style={{ marginTop: 20 }}>
        <Button onClick={() => setActiveIndex(0)}>Go to Slide 0</Button>
        <Button onClick={() => setActiveIndex(1)}>Go to Slide 1</Button>
        <Button onClick={() => setActiveIndex(2)}>Go to Slide 2</Button>
        <Button onClick={() => setActiveIndex(3)}>Go to Slide 3</Button>
      </ButtonGroup>
    </div>
  );
}

```

--------------------------------

### Style Carousel Navigation Buttons (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Illustrates how to style the navigation buttons of a react-material-ui-carousel using `navButtonsProps` and `navButtonsWrapperProps`. This allows for customization of button appearance and positioning. Requires the carousel component and Material UI Paper.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function StyledNavCarousel() {
  return (
    <Carousel
      fullHeightHover={false}  // Button wrapper only as big as the button
      navButtonsProps={{
        style: {
          backgroundColor: 'cornflowerblue',
          borderRadius: 0,
          padding: '10px 15px'
        }
      }}
      navButtonsWrapperProps={{
        style: {
          bottom: '0',         // Move buttons to bottom
          top: 'unset'         // Override default top positioning
        }
      }}
      navButtonsAlwaysVisible={true}
    >
      <Paper style={{ height: 300, padding: 20, textAlign: 'center' }}>
        <h2>Custom Styled Navigation</h2>
        <p>Blue square buttons positioned at the bottom</p>
      </Paper>
      <Paper style={{ height: 300, padding: 20, textAlign: 'center' }}>
        <h2>fullHeightHover disabled</h2>
        <p>Button wrappers are compact</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Customize Carousel Navigation Buttons with NavButton Prop

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Allows complete control over the rendered navigation buttons by providing a custom component via the NavButton prop. The provided function must return a React component and handle the onClick event for functionality. Dependencies include '@mui/material' for the Button component.

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

--------------------------------

### Carousel Properties

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

This section details the various boolean properties that can be configured for the carousel component to control its behavior and appearance.

```APIDOC
## Carousel Component Properties

### Description
This section details the various boolean properties that can be configured for the carousel component to control its behavior and appearance.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```json
{
  "swipe": true,
  "indicators": true,
  "navButtonsAlwaysVisible": false,
  "navButtonsAlwaysInvisible": false,
  "cycleNavigation": true,
  "fullHeightHover": true
}
```

### Response
#### Success Response (N/A - Component Properties)

#### Response Example
```json
{
  "swipe": "boolean - Defines if swiping left and right (in touch devices) triggers next and prev behaviour. Default: true.",
  "indicators": "boolean - Defines the existence of bullet indicators. Default: true.",
  "navButtonsAlwaysVisible": "boolean - Defines if the next/previous buttons will always be visible or not. Default: false.",
  "navButtonsAlwaysInvisible": "boolean - Defines if the next/previous buttons will always be invisible or not. Default: false.",
  "cycleNavigation": "boolean - Defines if the next button will be visible on the last slide, and the previous button on the first slide. Auto-play also stops on the last slide. Indicators continue to work normally. Default: true.",
  "fullHeightHover": "boolean - Defines if the next/previous button wrappers will cover the full height of the Item element and show buttons on full height hover. Default: true."
}
```
```

--------------------------------

### Advanced Carousel Indicator Styling with Multiple Props

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Illustrates advanced customization of carousel indicators using multiple props: IndicatorIcon, indicatorIconButtonProps, activeIndicatorIconButtonProps, and indicatorContainerProps. This allows for detailed styling of individual indicators, active indicators, and the container itself, including spacing, colors, and positioning.

```jsx
import Home from '@mui/icons-material/Home';

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

    }}
>
    {...}
</Carousel>
```

--------------------------------

### Carousel Customization Props

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

This section details the props used for customizing the appearance and behavior of the carousel's navigation elements and indicators.

```APIDOC
## Carousel Customization Props

### Description
This section details the props used for customizing the appearance and behavior of the carousel's navigation elements and indicators.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Component Props
- **navButtonsWrapperProps** (object) - Optional - Used to customize the div surrounding the nav `IconButtons`. Use this to position the buttons onto, below, outside, e.t.c. the carousel. *Tip*: Check the [default styles](#default-styles) below.
- **navButtonsProps** (object) - Optional - Used to customize the actual nav `IconButton`s.
- **NextIcon** (ReactNode) - Optional - Defines the element inside the nav "next" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (`<img/>`, `<div/>`, ...) you like. Defaults to `<NavigateNextIcon/>`.
- **PrevIcon** (ReactNode) - Optional - Defines the element inside the nav "prev" `IconButton`. Refer to [MaterialUI Button Documentation](https://material-ui.com/components/buttons/) for more examples. It is advised to use Material UI Icons, but you could use any element (`<img/>`, `<div/>`, ...) you like. Defaults to `<NavigateNextIcon/>`.
- **NavButton** (function) - Optional - Gives full control of the nav buttons. Should return a button that uses the given `onClick`. Works in tandem with all other customization options (`navButtonsProps`, `navButtonsWrapperProps`, `navButtonsAlwaysVisible`, `navButtonsAlwaysInvisible`, `fullHeightHover`, ...). Refer to the [example section](README.md#CustomizingNavigation) for more information.
- **indicatorIconButtonProps** (object) - Optional - Used to customize **all** indicator `IconButton`s. Additive to `activeIndicatorIconButtonProps`. Any `aria-label` property used will be rendered with the indicator index next to it. e.g. `{'aria-label': 'indicator'}` --> `'indicator 1'`.

### Request Example
N/A (Component Props)

### Response
#### Success Response (N/A)
N/A (Component Props)

#### Response Example
N/A (Component Props)
```

--------------------------------

### Control Carousel Navigation and Indicator Visibility (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Shows how to control the visibility of navigation buttons and bullet indicators in a carousel using boolean props. It covers options like showing buttons only on hover, always invisible, and enabling cycle navigation. Dependencies include 'react-material-ui-carousel' and '@mui/material'.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';

function VisibilityControlCarousel() {
  return (
    <Carousel
      indicators={true}                    // Show bullet indicators
      navButtonsAlwaysVisible={false}      // Show buttons only on hover
      navButtonsAlwaysInvisible={false}    // Don't permanently hide buttons
      cycleNavigation={true}               // Show next on last slide, prev on first
      fullHeightHover={true}               // Button wrappers cover full height
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Default Visibility</h2>
        <p>Hover to see navigation buttons</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Cycle Navigation</h2>
        <p>Can navigate from last to first slide</p>
      </Paper>
    </Carousel>
  );
}

// Minimal carousel with no visible controls
function MinimalCarousel() {
  return (
    <Carousel
      indicators={false}
      navButtonsAlwaysInvisible={true}
      autoPlay={true}
      swipe={true}
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>No Visible Controls</h2>
        <p>Swipe or wait for auto-play</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Clean Interface</h2>
        <p>Auto-play and swipe only</p>
      </Paper>
    </Carousel>
  );
}

```

--------------------------------

### Customizing Carousel Navigation Icons

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Demonstrates how to customize the icons used for the next and previous navigation buttons. You can use Material UI icons or custom image elements.

```jsx
import RandomIcon from '@@mui/icons-material/Random'; // Note: this doesn't exist

<Carousel
    NextIcon={<RandomIcon/>}
    PrevIcon={<RandomIcon/>}
    // OR
    NextIcon={<img src="http://random.com/next"/>}
    PrevIcon={<img src="http://random.com/prev"/>}
>
    {...}
</Carousel>
```

--------------------------------

### Configure Carousel Indicator Styles (JavaScript)

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Defines the style object for carousel indicators in a React Material UI application. This includes properties for the indicator container, individual indicators, icons, and the active state. These styles are typically passed as props to the carousel component.

```javascript
{
    indicators: {
        width: "100%",
        marginTop: "10px",
        textAlign: "center"
    },
    indicator: {
        cursor: "pointer",
        transition: "200ms",
        padding: 0,
        color: "#afafaf",
        '&:hover': {
            color: "#1f1f1f"
        },
        '&:active': {
            color: "#1f1f1f"
        }
    },
    indicatorIcon: {
        fontSize: "15px",
    },
    // Applies to the active indicator
    active: {
        color: "#494949"
    }
}
```

--------------------------------

### Default Styles for Carousel Navigation Buttons

Source: https://github.com/learus/react-material-ui-carousel/blob/master/README.md

Provides the default CSS styles applied to the navigation buttons of the carousel component. This includes styles for the button wrapper, visibility, and the buttons themselves, along with specific styles for 'next' and 'prev' buttons.

```javascript
{
    buttonWrapper: {
        position: "absolute",
        height: "100px",
        backgroundColor: "transparent",
        top: "calc(50% - 70px)",
        '&:hover': {
            '& $button': {
                backgroundColor: "black",
                filter: "brightness(120%)",
                opacity: "0.4"
            }
        }
    },
    fullHeightHoverWrapper: {
        height: "100%",
        top: "0"
    },
    buttonVisible:{
        opacity: "1"
    },
    buttonHidden:{
        opacity: "0",
    },
    button: {
        margin: "0 10px",
        position: "relative",
        backgroundColor: "#494949",
        top: "calc(50% - 20px) !important",
        color: "white",
        fontSize: "30px",
        transition: "200ms",
        cursor: "pointer",
        '&:hover': {
            opacity: "0.6 !important"
        },
    },
    // Applies to the "next" button wrapper
    next: {
        right: 0
    },
    // Applies to the "prev" button wrapper
    prev: {
        left: 0
    }
}
```

--------------------------------

### Customize Carousel Navigation Icons (React)

Source: https://context7.com/learus/react-material-ui-carousel/llms.txt

Shows how to replace the default navigation icons in a react-material-ui-carousel with custom Material UI icons or simple text labels. This requires the carousel component and optionally Material UI icons or basic strings.

```tsx
import Carousel from 'react-material-ui-carousel';
import { Paper } from '@mui/material';
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';

function CustomIconCarousel() {
  return (
    <Carousel
      NextIcon={<ArrowForwardIosIcon />}
      PrevIcon={<ArrowBackIosIcon />}
      navButtonsAlwaysVisible={true}
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Custom Navigation Icons</h2>
        <p>Using Material UI icons for prev/next</p>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Always Visible</h2>
        <p>Navigation buttons remain visible</p>
      </Paper>
    </Carousel>
  );
}

// Using text labels instead of icons
function TextNavCarousel() {
  return (
    <Carousel
      NextIcon="Next"
      PrevIcon="Prev"
      navButtonsAlwaysVisible={true}
    >
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Text Navigation</h2>
      </Paper>
      <Paper style={{ height: 200, padding: 20 }}>
        <h2>Simple Labels</h2>
      </Paper>
    </Carousel>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.