react-slick stacks slides vertically

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 ( <Slider {…settings}> <div> {slides.map(function(item){ return ( <div key={item.id} className=“item_slider” style={{background:url(/images/covers/${item.cover})}}> <div className="caption">

{item.topic}

{item.title}

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

const Featured = (props) => { return( <div> {generateSlides(props)} </div> ) }

export default Featured;

[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>

[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";