CODEWITHSUNDEEP
reactjsreact-slick
scripter
scripter

Reputation: 1526

React-slick not working on first render

I tried react-slick with dynamic children but it don't work as it should be, the height on first render was coming as some 176px but If I try to resize the browser then it works and the height changes to 514px. I thought may be I force my component to render one more time but it didn't work. I tried to replicate the issue but getting some other issue there.

Take a look at the fiddle 

 var Item = React.createClass({
 render: function() {
 return ( < div > < p > kitten pic < /p><br/ > < img src ='http://placekitten.com/g/400/200' / > < /div>)
 }
 });

var ReactSlickDemo = React.createClass({
render: function() {
var settings = {
  dots: false,
  vertical: true,
  autoplay: true,
  autoplaySpeed: 6000,
  arrows: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  touchMove: false,
  swipeToSlide: false,
  swipe: false
}
return ( < div className = 'container' >
  < Slider {...settings
  } >
  < Item / >
  < Item / >
  < Item / >
  < /Slider> < /div>
 );
 }
});

 ReactDOM.render( < ReactSlickDemo / > ,
 document.getElementById('container')
  );

Upvotes: 3

Views: 10868

Answers (3)

Hamid Mohamadi
Hamid Mohamadi

Reputation: 169

in my case this worked:

<Slider className={'image-carousel'}>

and set style like this:

.image-carousel {
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
 }

Upvotes: 0

Mehadi Hassan
Mehadi Hassan

Reputation: 1230

Please add the parent div css:-

.container {   display: inline-block; }

Upvotes: 0

RVCoder
RVCoder

Reputation: 542

You have added react component <Item> in <Slider> component. So, you need to wrap <Item> inside <div> and that should work.

 <div>
      < Item / >
      < Item / >
      < Item / >
 </div>

Please find details on below link:

https://github.com/akiran/react-slick/issues/328

Upvotes: 2

Related Questions