title: Swipe effect in react js
body: <p>I'm trying to create a swipe event using React. I do not want to use any external component or jquery.</p>
  
  <p>The css is something like : </p>
  
  <pre><code>.outter{
    position:relative;
    width: 100%;
    height: 150px;
    background-color: blue;
  }
  
  .inner{
    position: absolute;
    width: 1000%; 
    left: 50px;
  }
  .child{
    float: left;
    margin-right: 15px;
  }
  </code></pre>
  
  <p>In the react component I'm trying to do something like : </p>
  
  <pre><code>class Test extends React.Component {
      constructor(props){
      super(props);
  
      this.state = {
          left: 0
      }
    }
  
    handleSwipe(){
      this.setState({left: -350})
    }
  
    render(){
      return(
          &lt;div className="outter"&gt;
              &lt;div className="inner" style={{left: this.state.left}} onSwipe={this.handleSwipe.bind(this)}&gt;
                   &lt;div className="child"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/div&gt;
                   &lt;div className="child"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/div&gt;
                   &lt;div className="child"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/div&gt;
                   &lt;div className="child"&gt;&lt;img src="http://placehold.it/350x150" /&gt;&lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  React.render(&lt;Test /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p>How can I recognize swipe event?</p>
  
  <p>If I in my example instead of <code>onSwipe</code> add <code>onClick</code> it works, but how can I make the swipe effect?</p>
  
  <p>Here is <a href="http://jsfiddle.net/jwm6k66c/1293/" rel="noreferrer">jsfiddle</a>.</p>