react-slick stacks slides vertically

[davidshare]

import React from 'react';
import Slider from 'react-slick';

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

const generateSlides = ({slides}) => {
if(slides){
return (

{slides.map(function(item){
return (

style={{background:url(/images/covers/${item.cover})}}>

{item.topic}

{item.title}

)
})}

)
}
}

const Featured = (props) => {
return(

{generateSlides(props)}

)
}

export default Featured;

[Sailias]

@davidshare did you import the slick css?

[davidshare]

Yes I did

[Sailias]

@davidshare please include a sandbox, such as: https://codesandbox.io/s/k98w7v4r43

[davidshare]

here is a link to the github repo

https://github.com/davidshare/SimpleNBAHighlights

[Sailias]

@davidshare the sandbox has everything you need to demo your code.

Anyway, the problem is you have

<Slider>
  <div>
     { slides.map }
  </div>
</Slider>

This means you have a single slide, with divs inside of it, which probably are going to stack vertically.
Remove the first div in your slider.

[davidshare]

@Sailias I did that. But instead, the whole page comes out blank. It is like the space for the image is still occupied yet blank. Sorry about the Sandbox, still have not figured out how to implement my code there. The data I am using is from an offline json file.

[Sailias]

@davidshare it's probably because your slide data hasn't loaded when you render the slider.

this.state = {
  home: {
    slider: []
  }
}

... 

{ this.state.home.slider.length > 0 && <Featured slides={this.state.home.slider} /> }

[neemssoni]

@Sailias I am also facing the same issue, I tried hard coded slide data, still that coming same. For me even the slider renders and suddenly disappears

[zflopez]

@neemssoni @Sailias I'm not sure I'm really helpful at this point, but have you tried importing "slick-carousel" styles in your app? Such as:

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

[jakub-musik]

For anyone arriving at this from google:

It may be because the container in which you have your Slider has a non-compatible display mode, try display: block
<DivWithBlockDisplay> <Slider> <div /> <div /> </Slider> </DivWithBlockDisplay>