Prev and Next button is not working correctly at the breakpoints
Looks like everything is working already but the disabled Next
button. I think it should work already by changing the disabled
condition to check the amount of slides the slider is at.
Changing the renderArrow
body to this in the provided code sandbox seems like it works:
const lastElementsIndex = totalSlides - slidesToScroll;
return (
<div>
<button disabled={currentIndex === 0} onClick={prevCallback}>
Previous
</button>
<button disabled={currentIndex > lastElementsIndex} onClick={nextCallback}>
Next
</button>
</div>
);
Since the initial state is not synchronized with the actual values depending on the breakpoint, there might be a special case as pointed out in the comments. Using onReInit
as a non-arrow function should get access to the this
object of the Slick slider itself. From there, the correct slidesToScroll
can be retrieved:
const settings = {
// ... other settings ...
onReInit: function() {
const slidesToScroll = this.slidesToScroll;
if (slidesToScroll !== state.slidesToScroll) {
setState(state => ({ ...state, slidesToScroll }));
}
},
// ... other settings ...
};
In a previous edit, I've proposed using onInit
- using onReInit
has the benefit of shooting on window resize as well. Thus it should also synchronize the state correctly when resizing.