akiran / akiran/react-slick

When the slider is rendered on server-side with centerMode, the currentWidth may become null, which results in a css parse error

Open
#2,090 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11.9k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

Hi

In the initial-slider.js file you have this code:

```javascript
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](https://user-images.githubusercontent.com/18726754/136978909-e54e7184-4570-488e-ba3f-83d3f68bb5ba.png)

Would be nice to have a check for this possibility. My first guesses would be something like:

```javascript
let currentWidth = `${childrenWidths[this.state.currentSlide] ?? 0}px`;
```

or
```javascript
let currentWidth = childrenWidths[this.state.currentSlide] ?? 0;
trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}px) / 2 )`;
```

or

```javascript
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.