Geek Answers Handbook

Slider Slider remains on the same page if slides are changed

I am stuck in a reaction problem. The subject line may not make sense, but I will try to explain the script in detail. See this fiddle example to see the problem in action.

var DemoSlider = React.createClass({ getSlides(count) { var slides = []; for(var i = 0; i < 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 this demo, the slider first shows 20 slides (3 per page). The idea is that if you press a button, it will generate a random number, which will be the new number of slides. The code is pretty straightforward.

To reproduce the problem, 1. Continue to click the Next arrow until you reach the last slide.
2. Click the 'Click' button to create a new random number of slides.

I expected that the slide would return to the first slide, but would not stay on the page where it had been before. Even worse, if the new number of slides is lower than the previous one, the user will see a blank page without slides. When you click the previous error, it can go to the previous slides, and everything works fine, but the original display destroys the user's work.

Is there something I am missing to add the code, or is this an error?

Thanks, Abi.

+5
source share
2 answers

I would say that this is more likely an erroneous behavior, but you can still achieve what you want by forcing to redraw after the new collection has been passed as props , resetting the key response:

 <DemoSlider key={Date.now()} count={this.state.count}/>

UPDATED FIDDLE

+5
source

Quick workaround: when you switch to a new set of slides, remove the component and restore it again. Then it will begin with the first slide. You can do this by increasing the key attribute of DemoSlider .

For the correct correction, you will need to tell the component to change the "current slide" so that it does not look at the index of the slide beyond, but a random look at the source at https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.11 .0 / react-slick.js suggests that this currently does not allow. You must change the value of InnerSlider.componentWillReceiveProps() to check state.currentSlide for props.slidesToShow and state.slideCount .

It would also be useful to allow the transfer of currentSlide as a props.

+1
source

More articles:


All Articles