在反應流暢的輪播中添加全屏背景

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>