响应式轮播 React material-ui

Posted 2023-02-22

技术标签:

【中文标题】响应式轮播 React material-ui【英文标题】：Responsive Carousel React material-ui 【发布时间】：2020-03-05 03:20:08 【问题描述】：

我正在尝试使用 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  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 组件。

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

【问题讨论】：

【参考方案1】：

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

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：