Created
April 29, 2019 20:14
-
-
Save captchadex/e1401e4838d5343b52a2d63d1763371a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Slideshow extends React.Component { | |
| state = { | |
| current: 0 | |
| } | |
| prevImage = () => { | |
| const { images } = this.props | |
| const { current } = this.state | |
| if (current === 0) { | |
| this.setState({ | |
| current: images.length - 1 | |
| }) | |
| } else { | |
| this.setState({ | |
| current: current - 1 | |
| }) | |
| } | |
| } | |
| nextImage = () => { | |
| const { images } = this.props | |
| const { current } = this.state | |
| if (current >= images.length - 1) { | |
| this.setState({ | |
| current: 0 | |
| }) | |
| } else { | |
| this.setState({ | |
| current: this.state.current + 1 | |
| }) | |
| } | |
| } | |
| render() { | |
| const { images } = this.props | |
| const { current } = this.state | |
| return ( | |
| <div className="container"> | |
| <img className="img-size" src={images[current]} /> | |
| <div className="buttons"> | |
| <button onClick={this.prevImage}> | |
| <i class="fas fa-chevron-left" /> | |
| </button> | |
| <button onClick={this.nextImage}> | |
| <i class="fas fa-chevron-right" /> | |
| </button> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| } | |
| ReactDOM.render(<Slideshow images={images} />, document.getElementById("root")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment