image continuous changing div react

Solutions on MaxInterview for image continuous changing div react by the best coders in the world

showing results for - "image continuous changing div react"
César
28 Feb 2019
1import React from "react";
2import ReactDOM from "react-dom";
3
4import "./styles.css";
5
6class App extends React.Component {
7  constructor(props) {
8    super(props);
9    this.switchImage = this.switchImage.bind(this);
10    this.state = {
11      currentImage: 0,
12      images: [
13        "https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
14        "https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwNC84MzAvb3JpZ2luYWwvc2h1dHRlcnN0b2NrXzExMTA1NzIxNTkuanBn",
15        "https://d17fnq9dkz9hgj.cloudfront.net/uploads/2012/11/152964589-welcome-home-new-cat-632x475.jpg",
16        "https://i.ytimg.com/vi/jpsGLsaZKS0/maxresdefault.jpg"
17      ]
18    };
19  }
20
21  switchImage() {
22    if (this.state.currentImage < this.state.images.length - 1) {
23      this.setState({
24        currentImage: this.state.currentImage + 1
25      });
26    } else {
27      this.setState({
28        currentImage: 0
29      });
30    }
31    return this.currentImage;
32  }
33
34  componentDidMount() {
35    setInterval(this.switchImage, 1000);
36  }
37
38  render() {
39    return (
40      <div className="slideshow-container">
41        <img
42          src={this.state.images[this.state.currentImage]}
43          alt="cleaning images"
44        />
45      </div>
46    );
47  }
48}
49const rootElement = document.getElementById("root");
50ReactDOM.render(<App />, rootElement);