Slideshow

Attempt at making an image slideshow.

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

class Slide extends Component{
	constructor(props){
		super(props);

		this.state={
        backgroundImage: `url(../images/${this.props.image}.jpg)`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: '50% 60%',
        height:"100%"
        }
	}

	render(){
		return(
               <div className="slide" style={this.state}>
			</div>
		);
	}
}

class Slideshow extends React.Component{
	constructor(props){
		super(props);

        this.state={
            images:['Buffalo', 'Yellowstone', 'UpMyNose'],
            currentIndex:0,
            translateValue:0
        };
        this.goToPrevSlide=this.goToPrevSlide.bind(this);
        this.goToNextSlide=this.goToNextSlide.bind(this);
        this.slideWidth=this.slideWidth.bind(this);
	}
    
    goToPrevSlide(){
        if(this.state.currentIndex===0){
            return this.setState({
                currentIndex: this.state.images.length-1,
                translateValue: this.state.translateValue+(this.slideWidth())
            })
        this.setState(prevState=>({
            currentIndex:prevState.currentIndex-1,
            translateValue:prevState.translate+(this.slideWidth())
            }))
        }
        
    }
    
    goToNextSlide(){
        if(this.state.currentIndex===this.state.images.length -1){
            return this.setState({
                currentIndex:0,
                translateValue:0
                });
        }

        this.setState(prevState => ({
            currentIndex:prevState.currentIndex+1,
            translateValue: prevState.translate + -(this.slideWidth())
        }));
    }
    
    slideWidth(){
        return document.querySelector('.slide').clientWidth
    }

	render(){
		return(
			<div className="slideshow"
               style={{
                   transform: `translateX(${this.state.translateValue}px)`,
                   transition: 'transform ease-out 0.45s'
               }}
               >
    ...