我正在尝试使用React material-ui构建音乐巡演网站。
我希望这个网站看起来像这个网站: https://www.oddfantastic.com/
我是React的新手,经过查找了解了诸如bootstrap和material-ui等库之后,决定采用material-ui。目前我卡在了第一页上,无法实现滑动图片的效果。我尝试了不同的方法来获得上面网站第一页的效果,但是到目前为止还没有成功。
我开始使用网格和卡片,现在正在尝试网格列表。以下是我的代码:
import Slide from '@material-ui/core/Slide';
import React, { Component } from 'react'
import { Grid, Card, CardContent, CardMedia, Typography } from '@material-ui/core';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import { Carousel, CarouselSlide } from 'material-ui-carousel'
export default class App extends Component {
pictures = [
{imagel: './images/radio7-2-1.png', imager: './images/radio7-2-2.png', title: 'r7-2'},
{imagel: './images/radio7-3-1.png', imager: './images/radio7-3-2.png', title: 'r7-3'},
{imagel: './images/masterphil-1.png', imager: './images/masterphil-2.png', title: 'mp'},
{imagel: './images/vito-1.png', imager: './images/vito-2.png', title: 'vito'},
];
render () {
return (
// <Grid container justify="center" spacing={0}>
/* {[0, 1].map(value => (
<Grid key={value} item> */
<Carousel>
{this.pictures.map(({ imagel, imager, title }) => (
<CarouselSlide key={title}>
<GridList cellHeight={160} cols={2}>
<GridListTile key={title} style={{ height: 'auto' }}>
<img src={imagel} alt={title} />
</GridListTile>
</GridList>
{/* <Card width="100%" key={title}>
<CardMedia
image={imagel}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardMedia
image={imager}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card> */}
</CarouselSlide>
))}
</Carousel>
/* </Grid>
))}
</Grid> */
)
}
}
看起来所有图像都同时出现了。
由于我的知识非常有限,我想知道是否选择了正确的库。特别是我找不到一个Material-UI组件可以实现我想要的效果。
任何建议或方向都将是非常好的。谢谢!