react-slick icon indicating copy to clipboard operation
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

Open rayaqin opened this issue 3 years ago • 0 comments

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: image

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

rayaqin avatar Oct 12 '21 15:10 rayaqin