Lazy loading fails to initialize correctly when using react components as slides. about react-slick HOT 13 CLOSED

getVidElement: function (vidId) {

var video = this.props.Annotation[vidId];

var vidElement;


  vidElement = <Video video={video} />;

return (<div   key ={video.id.objectId} >
    {vidElement}
    </div>);
 },

 render: function () {
       var vidElements = this.getListOfVidIds().map(this.getVidElement);
       var settings = {
       dots: true,
       infinite: true,
       lazyLoad:true,
        arrows:true,
       speed: 500,
      slidesToShow: 3,
      slidesToScroll: 3
};

return (
  <Slider {...settings} >
    {vidElements}

  </Slider>
);
  }

getListOfVidIds: function () {
return Object.keys(this.props.Annotation);
 },


  getVidElement: function (vidId) {

var video = this.props.Annotation[vidId];


var vidElement;


  vidElement = <div 
  onClick = {this.props.handleThumbnailClick.bind(null, this, video)}
       onMouseOver = {this.handleMouseOver}  
         onMouseOut = {this.handleMouseOut} 
         style={videoStyle}
      >
      <h3>{video.description}</h3>
      <h5>{video.hashtags}</h5>
      </div>;

return (<div  key ={video.id.objectId} >
    {vidElement}
    </div>
       );

  },


  render: function () {



    var vidElements = this.getListOfVidIds().map(this.getVidElement);

    var slidesScroll = 3
    if (vidElements.length <4 ){
      slidesScroll = 1  
    }
var settings = {
dots: true,
    lazyLoad: true,
  infinite: true,
    arrows:true,
  speed: 500,
  slidesToShow: slidesScroll,
  slidesToScroll: slidesScroll
};

return (
  <Slider {...settings} >
    {vidElements}

  </Slider>
);

 }

});