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

Offen
#2,090 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
11.9k
Forks
2.1k
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.