The following react component here:

http://engineering.kapost.com/2018/05/horizontal-react-component-slider/

Working example for the react component: https://codesandbox.io/s/nkm614n740?from-embed

I have been trying to figure out how to convert this into a simplified jquery component/function, but I just can't get around some of the functions that are working in react out of the box.

Here is the full code below:

this.state = { marginLeft: 0, }; renderLeftArrow = () => { if (this.state.marginLeft !== 0) { return ( <button className="caret caret-left" onClick={this.handleLeftClicked}> {this.props.renderLeftArrow()} </button> ); } return null; } const remainingWidth = contentWidth - (sliderWidth) - currentMarginLeft; handleLeftClicked = () => { const currentMarginLeft = this.state.marginLeft; const sliderWidth = this.slider.offsetWidth; let marginLeft; if (currentMarginLeft > sliderWidth) { marginLeft = currentMarginLeft - sliderWidth; } else { marginLeft = 0; } this.setState({ marginLeft }); } handleRightClicked = () => { const currentMarginLeft = this.state.marginLeft; const sliderWidth = this.slider.offsetWidth const contentWidth = this.sliderContent.offsetWidth; const remainingWidth = contentWidth - (sliderWidth - arrowWidth) - currentMarginLeft; let marginLeft; if (remainingWidth > 0) { if (remainingWidth <= sliderWidth) { marginLeft = currentMarginLeft + remainingWidth; } else { marginLeft = currentMarginLeft + sliderWidth; } } else { marginLeft = currentMarginLeft; } this.setState({ marginLeft }); }; componentDidMount() { window.addEventListener('resize', this.handleResize()); this.resetMargin(); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize()); }

Below is what I was able to achieve thus far trying to 'reverse-engineer' it. Looks like its somewhat working but could use some pointers...

Also in JSfiddle