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

オープン
#2,090 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
11.9k
フォーク
2.1k
PR マージ指標
30日以内にマージされた PR はありません

説明

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

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。