reactjs - React-slick Slider stays on same page if slides items are changed -

i stuck issue react-slick. subject line may not make sense, try explain scenario in detail. see example fiddle see issue in action.

var demoslider = react.createclass({ getslides(count) { var slides = []; for(var = 0; < count; i++) {     slides.push((<img key={i} src='http://placekitten.com/g/400/200' />)); } return slides; },  render: function() { var settings = {     dots: false,   infinite: false,   slidestoshow: 3,   slidestoscroll: 3 }  var slides = this.getslides(this.props.count);  return (     <div classname='container'>     <slider {...settings}>         { slides }     </slider>   </div> ); } }); 

in demo, slider shows 20 slides (3 per page). idea if click button, generate random number, new number of slides. code simple , self-explanatory.

to reproduce problem, 1. keep on clicking next arrow until reach last slide.
2. click on button says 'click' generate new random number of slides.

my expectation slide go first slide not stay on page was. worse, if new number of slides lower previous number, user see blank page no slides. on clicking previous error, he/she can go previous slides, , works initial display ruins user experience.

is there missing add in code, or bug?

thanks, abhi.

i rather buggy behavior, still can achieve want forcing redraw after new collection has been passed props, resetting react's key:

<demoslider key={date.now()} count={this.state.count}/>  

updated fiddle