响应式走马灯 React material-ui

Question

我正在尝试使用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组件可以实现我想要的效果。

任何建议或方向都将是非常好的。谢谢！

- Mr. D

Answer 1

MUI官方文档提供了一个使用Carousel Effect的示例。

你可以在这里找到该示例。

该演示使用react-swipeable-views创建轮播效果。

- Prakhar

---

干得好，Prakhar！ - Davis Jones

包"react-swipeable-views"与最新的React版本不兼容。当前在npm上的包（0.14.0）需要React 15.3.0、16.0.0或17.0.0。 - Colin McGovern

Answer 2

我认为您正在寻找这个包，它是一个使用Material-UI的可扩展的Carousel UI组件。祝编码愉快！

- Amin Mohamed

Answer 3

顺便提一句，Material UI 并没有原生的 Carousel 组件，对于初学者来说，我发现 Material UI 的自定义非常具有挑战性。最近尝试了许多 Carousel 库后，我发现 Ant Design 提供了最好的可直接使用的 carousel。该库由阿里巴巴集团开发和维护，因此您可以更加信任它，而不是一些小型库。

- user2683470

---

AntD 很重且速度较慢。你可能想选择一个独立的 npm 库来实现轮播。 - duduwe

@duduwe，即使我只导入和使用轮播图，整个 antD 库会加载吗？ - coder

@coder 你需要确保通过分析输出构建来使树摇起作用。如果你只想使用 Carousel，我认为那样是可以的。只要确保你的捆绑包中只包含 Carousel。 - undefined

Answer 4

如果有人还卡在这里，只需使用以下代码：

npm install react-material-ui-carousel --save
you should install also:
npm install @mui/material
npm install @mui/icons-material
npm install @mui/styles

import Carousel from 'react-material-ui-carousel';

            <Carousel>
                {
                    this.props.item.images.map( (image, i) => <img key={i} src={image} /> )
                }
            </Carousel>

- Miftah Classifieds