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

Đang mở
#2,090 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
11.9k
Fork
2.1k
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.