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

Abierto
#2,090 0 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
11.9k
Forks
2.1k
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.