在反应流畅的轮播中添加全屏背景

Question

I am using react-slick to create a full screen slider, but I am stuck at adding a image in the background.

I am using the following.

    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>
      )
    }

I did this, but I am not able to add images to background. The data array will have multiple images later on, but for now I just want to show the full screen background image.

How can I achieve this?

Answer 1

Use settings:

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>