響應式輪播 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 組件。

任何建議或方向都會很棒。 謝謝

Answer 1

我認為您正在尋找這個package ，它是一個使用 Material-UI 的可擴展輪播 UI 組件。 快樂編碼！

Answer 2

順便說一句，Material UI 沒有原生 Carousel 組件，我發現 Material UI 定制對於初學者來說非常具有挑戰性。 最近嘗試了很多輪播庫后，我發現 ant 設計有最好的即用型輪播。 該庫由阿里巴巴集團開發和維護，因此您可以比一些小型庫更好地依賴它。

Answer 3

MUI 官方文檔包含一個使用輪播效果的示例。

該示例可以在 這里找到

該演示使用react-swipeable-views創建輪播。

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>