react-slick
react-slick copied to clipboard
When the slider is rendered on server-side with centerMode, the currentWidth may become null, which results in a css parse error
Hi
In the initial-slider.js file you have this code:
if (this.props.centerMode) {
let currentWidth = `${childrenWidths[this.state.currentSlide]}px`;
trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `;
}
which if the slider is being rendered on server-side (where the width of the items in the list might not be known if those contain images for example) can result in nullpx
as the value of currentWidth, and then it will result in a css parse error.
Example of this parse error on validator.w3:
Would be nice to have a check for this possibility. My first guesses would be something like:
let currentWidth = `${childrenWidths[this.state.currentSlide] ?? 0}px`;
or
let currentWidth = childrenWidths[this.state.currentSlide] ?? 0;
trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}px) / 2 )`;
or
let currentWidth = 0;
if(childrenWidths[this.state.currentSlide]){
currentWidth = `${childrenWidths[this.state.currentSlide]}px`
}
trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 )`;
Thank you for your consideration,
Kind regards, Bálint