JAVASCRIPT

carousel in material ui react

import React, { useEffect } from "react";
import { CssBaseline } from "@material-ui/core";

import { Switch, Route } from "react-router-dom";

import HomePage from "./Homepage/homepage";

import SearchPage from "./searchpage/browse";

import Footer from "./components/footer";

import Ereader from "./components/reader/ereader";

import Mybooks from "./mybooks/mybooks";

import Abar from "./components/Appbar/appbar";

const App = () => {
  useEffect(() => {}, []);
  return (
    <React.Fragment>
      <CssBaseline />
      <Abar />
      <main>
        <Switch>
          <Route exact path="/" render={(props) => <HomePage {...props} />} />
          <Route exact path="/browse" render={(props) => <SearchPage />} />
          <Route
            exact
            path="/read"
            render={(props) => <Ereader {...props} />}
          />
          <Route exact path="/mybooks" render={(props) => <Mybooks />} />
        </Switch>
      </main>
      <Footer />
    </React.Fragment>
  );
};

export default App;

============================================
or use this link for more details.

https://codesandbox.io/s/0l29m?file=/src/App.js:0-1023
https://github.com/Learus/react-material-ui-carousel

material ui carousel

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

material-ui-carousel

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>
    )
}

carousel with material ui

{
    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"
    }
}