When the slider is rendered on server-side with centerMode, the currentWidth may become null, which results in a css parse error
- Lingua principale
- JavaScript
- Stelle
- 11.9k
- Fork
- 2.1k
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
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:

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
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.