Material UI Carousel autoplay and loading image issue

Question

Hi i've found this https://github.com/Learus/react-material-ui-carousel to use it on my website. But i've encountered 2 problems:

1. In order to set the autoPlay state, i have to change it to class which leads to unable to use const classes = useStyles() so does anyone know what should i do?

2. I have 3 jpg photos saved in the img folder under the same directory and i have no idea why the photos cant be loaded in my localhost.

Here is my code:

import React from 'react';
import { createMuiTheme } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Tooltip from '@material-ui/core/Tooltip';
import Carousel from 'react-material-ui-carousel';
import CarouselSlide from 'react-material-ui-carousel';
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';

const theme = createMuiTheme ({
    palette: {
        primary:{
            main:'#3c52b2'
        }
    }
})

const useStyles = makeStyles((theme) => ({
    root: {
      flexGrow: 1,
    },
    Button: {
        "&:hover": {
            backgroundColor: "#fff !important"
          }
    },
    title: {
      flexGrow: 1,
    },
}));



export default function UMainPage (){
    const pictures = [
        {image:'./2.jpg', title:'Iu 1'},
        {image:'./3.jpg', title:'Iu 2'},
        {image:'./4.jpg', title:'Iu 3'}
    ];
    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="h6" className={classes.title}>
                        清动订馆平台
                    </Typography>
                    <Button color="inherit">首页</Button>
                    <Button color="inherit">历史订单</Button>
                    <Tooltip disableFocusListener disableTouchListener title="登录账号">
                        <Button color="inherit">未登录</Button>
                    </Tooltip>
                </Toolbar>
            </AppBar>

            <Carousel>
                {pictures.map(({image, title}) => (
                    <CarouselSlide key={image}>
                        <Card>
                            <CardMedia
                                image={image}
                                title={title}
                                style={{
                                    height: 0,
                                    paddingTop: '25%',
                                }}
                            />
                            <CardContent>
                                <Typography>{title}</Typography>
                            </CardContent>
                        </Card>
                    </CarouselSlide>
                ))}
            </Carousel>
        </ThemeProvider>
    );
} 

Answer 1

1. In order to set autoPlay you should pass it to Carousel like this:

<Carousel autoPlay>
  ...
</Carousel>

If you want to have ability to change it you should keep in state:

const [autoPlay, setAutoPlay] = useState(true);

2. You should import your images first and then keep them in the pictures array:

import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";

...

const pictures = [
  { image: image2, title: "Iu 1" },
  { image: image3, title: "Iu 2" },
  { image: image4, title: "Iu 3" },
];