时间戳

首页 > 解决方案 > Material UI Carousel 自动播放和加载图像问题

reactjs - Material UI Carousel 自动播放和加载图像问题

问题描述

嗨，我发现这个https://github.com/Learus/react-material-ui-carousel在我的网站上使用它。但是我遇到了两个问题：

  1. 为了设置autoPlay状态，我必须将其更改为导致无法使用的类，const classes = useStyles()所以有人知道我该怎么办吗？

  2. 我在同一目录下的 img 文件夹中保存了 3 张 jpg 照片，但我不知道为什么这些照片无法加载到我的本地主机中。

这是我的代码：

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">未登录&lt;/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>
    );
}

标签： reactjsmaterial-ui

解决方案

  1. 为了设置autoPlay你应该把它传递给Carousel这样的：
<Carousel autoPlay>
  ...
</Carousel>

如果你想有能力改变它，你应该保持状态：

const [autoPlay, setAutoPlay] = useState(true);
  1. 您应该先导入图像，然后将它们保存在pictures数组中：
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" },
];

推荐阅读