CODEWITHSUNDEEP
javascriptreactjsslick.jsreact-slick
Rishav Sinha
Rishav Sinha

Reputation: 359

Adding full screen background in react-slick carousel

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?

Upvotes: 1

Views: 3906

Answers (1)

id1
id1

Reputation: 221

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>

Upvotes: 0

Related Questions