React slick giving blank background image in div inside

Question

i am very new to React, i am trying to use react slick, so as to achieve image as background with carousel . but when i try to do it, i am getting blank instead of image. i cannot see my inline style as well when i inspect. but if i use tag that is showing the image.

below is the code

import React, { Component } from 'react';
import './home.css';
import Slider from "react-slick";
import image2 from '../../images/image2.jpg';
import image1 from '../../images/image1.jpg';
import image3 from '../../images/image3.jpg';



class Home extends Component{


  render(){

    let pics = [
      {"name":"pic_1",
        "url": image1
      },
      {"name":"pic_2",
        "url": image2
      },
      {"name":"pic_3",
        "url": image3
      }
    ]

    let settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    }
    return(

          <div >
            <Slider {...settings}>
              {pics.map((picture, i)=>{
                return(
                  <div key={i} style={{
                    backgroundSize: 'cover',
                    border: 'none',
                    height: '100vh',
                    backgroundImage: `url(${picture.url})`

                  }}>
                  <div>
                    {picture.name}
                  </div>

                  </div>
                )
              }
            )
          }
            </Slider>
          </div>

    )
  }
}

export default Home;

i try going through this answer Setting a backgroundImage With React Inline Styles but this didn't resolve my problem.

thanks in advance!

Can you please hard bind url from google first ? In that we it will be clear where problem is — Rajan Lagah, Mar 29 '20 at 14:47
if i am giving style in first div that is div above then the background image is showing as expected but in div inside images are blank.if i am using tag that too shows the image — Milan Mangar, Mar 29 '20 at 14:49
You might try to create a new component that loads an image tag and passes the image prop in that component — Ilham Nuruddin Al huda, Sep 26 '20 at 15:54

score 0 · Answer 1 · answered Oct 16 '22 at 18:34

Slick changes the css style of the root element of each slide.

Add your actual slide image as a child of each slide's first element.

This way it works for me:

<Slider {...settings}>
  {slideshowImages.map((image, index) => (
    <div key={index} style={{width: '100%', height: '400px'}}>
      <div
        style={{
          backgroundImage: `url(${image.url})`,
          width: '100%',
          height: '400px',
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }} />
    </div>
  ))}
</Slider>

Note that I am setting the same width & height to the root element of each slide and its child element holding the image. These dimensions may not work for you specific slideshow.

React slick giving blank background image in div inside

1 Answers1