akiran / akiran/react-slick

How update slick slider config ?

Open
#1,580 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
11.9k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

Hello,

After mounting slider component, I want update slider config for set padding center.

How to do it?

Code:
```
class PopupGallery extends Component {

constructor(props) {
super(props);

this.state = {
widthPadding: undefined
};

this._slider = null;
this._sliderItem = null;
}

shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.state.widthPadding != nextState.widthPadding) {
return true
}
return false;
}

componentDidMount() {
let widthSliderItem = ReactDOM.findDOMNode(this._sliderItem).getBoundingClientRect().width;

this.setState({
widthPadding: widthSliderItem * 0.1666666667 + 60
});
}

render() {
console.log(this.state.widthPadding);

let { className, title, items } = this.props;

let settings = {
dots: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
draggable: true,
infinite: false,
centerMode: true,
centerPadding: this.state.widthPadding
};

return (






{ title }







this._slider = ref }
className={ 'popup-gallery__slider' }
{ ...settings }
>
{
items.map((item, index) =>
this._sliderItem = ref}
/>
)
}


)
}
}

let popupGalleryWithStyles = withStyles(styles)(PopupGallery);

export default popupGalleryWithStyles;
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.