响应式轮播React材料-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组件。

任何建议或方向都会很棒。 谢谢

Answer 1

MUI 官方文档包含使用轮播效果的示例。

示例可以在这里

找到

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

Answer 2

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

Answer 3

Material UI 没有原生的 Carousel 组件，我发现 Material UI 定制对于初学者来说非常具有挑战性。最近尝试了很多轮播库后，我发现ant design有最好的即用型carousel。该库由阿里巴巴集团开发和维护，因此比一些小型库更值得信赖。

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>

Answer 5

我已将片段粘贴到此处。 https://gist.github.com/KishorJena/02ba527672d26435998ac226a04fa712

特点：

• 反应灵敏
• 尊重父宽度
• 滑动滚动
• 滚动滚动
• 拖动滚动
• 点击左/右按钮滚动
• MUI 组件
• 可以通过替换一些组件来用作普通 React