在react-slick中添加全屏背景

Question

我正在使用react-slick创建一个全屏滑块，但我在背景中添加图像时却卡住了。

我正在使用下面的代码。

    import image1 from "../assets/bg1.png"
    import image2 from "../assets/audit.png"
    import image3 from "../assets/logo.png"
    
    const data = [
      {
        image: image1,
        content: {
          title: "First Slide",
          title2: "balh22",
        },
      },
      {
        image: image2,
        content: {
          title: "Second Slide",
          title2: "balh22",
        },
      },
      {
        image: image3,
        content: {
          title: "Third Slide",
          title2: "balh22",
        },
      },
    ]


    const ValueProp = props => {
    
      const slides= () =>
        data.map(d => (
          <div style={{ backgroundImage: d.image }}>
            {/* <img src={d.image} /> */}
            <h1>{d.content.title}</h1>
          </div>
        ))
    
      return (
      
        <Slider style={{ height: "100vh" }} autoplay={true} dots={true}>
          {slides()}
        </Slider>
      )
    }

我这样做了，但我无法将图像添加到背景中。数据数组稍后将有多个图像，但现在我只想显示全屏背景图像。

我如何才能做到这一点？

Answer 1

使用设置：

const settings = {
      dots: false,
      fade: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      arrows: true,
      slidesToScroll: 1,
      className: "slides"
};

<Slider style={{ height: "100vh" }} {...settings}>
  {slides()}
</Slider>