使用 react-material-ui-carousel 包含背景图片答案

【问题标题】：Include background image using react-material-ui-carousel使用 react-material-ui-carousel 包含背景图片
【发布时间】：2020-09-08 01:50:29
【问题描述】：

我正在尝试在轮播组件中使用背景图像，但是当我将图像称为组件时，由于一个字符错误阻塞，我无法运行开发。我想在我想要展示的产品中使用一些背景图片。

export default function Management() {

  var items = [
    {
      name: "Produto #1",
      description: "Oculos esportivo"
    },
    {
      name: "Produto #2",
      description: "Jaqueta Jeans"
    },
    {
      name: "Produto #3",
      description: "Presente para o dia das crianças"
    }
  ]

  return (
    <Layout>
      <Carousel
        autoPlay={"false"}
        animation={"fade"}
      >
        {
          items.map((item, i) => <Item key={i} item={item} />)
        }
      </Carousel >
      <div>
        <h1>managing products</h1>
      </div>

    </Layout>
  )
  function Item(props) {
    return (
      <Paper>
        <FormControlLabel
          control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}
          label="Meu Favorito"
        />
        <Box borderRadius={16} {...defaultProps} >
          <h2>{props.item.name}</h2>
          <p>{props.item.description}</p>

        </Box>
      </Paper>
    )
  }
}

【问题讨论】：

标签： reactjs material-ui carousel next.js

【解决方案1】：

这是我在发布时发现的横幅。

import React from 'react'
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css";
//import './Banner.css';

export default function Banner() {
  return (
    <Carousel
      autoPlay
      infiniteLoop
      showThumbs={false}>
        <div >
          <img alt="banner4" src="assets/leilao4.jpg" />
          <p className="legend">Legend 4</p>
        </div>
        <div >
          <img alt="banner5" src="assets/leilao5.jpg" />
          <p className="legend">Legend 5</p>
        </div>
        <div >
          <img alt="banner4" src="assets/leilao4.jpg" />
          <p className="legend">Legend 4</p>
        </div>
      </Carousel>
  )
}

【讨论】：