react-web-slider

React web slider with native touch (react-web-slider)

###Installation and usage

####Inline code The easiest way to use react-web-slider is to install it from npm and build it into your app with Webpack.

$ npm install react-web-slider

####Then use it in your app:

import ReactWebSlider from 'react-web-slider';

const data=[
	{name:'abc'},
    {name:"def"},
    {name:"vv"}
]


const windowWidth = window.innerWidth;

class App extends Component {
state={
        index:0
    }

    next=()=>{
        this.carousel.next()
    }
    prev=()=>{
        this.carousel.prev()
    }

    goTo=(index)=>{
        this.carousel.go(-index)
    }


    renderCard = ({index,modIndex}) => {
        const item = data[modIndex]
        return (
            <div key={index} className='carousel-card' style={{padding:'10px',background:'yellow'}}>
                <div>{item.name }</div>
                <div className="">{modIndex}</div>
            </div>
        )
    }


    render() {
        return (
            <div style={{height:'600px'}}>
                <div className="">{this.state.index}</div>
                <ReactWebSlider
                  ref={elt => { this.carousel = elt }}
                  cardSize={windowWidth}
                  cardCount={data.length}
                  loop={false}
                  autoplay={false}
                  renderCard={this.renderCard}
                  onRest={(index)=>this.setState({index})}
              />
                  <div onClick={this.next}>Next</div>
                  <div onClick={()=>this.goTo(0)}>goto 1</div>
            </div>
              
        )
      }
}
	```

### MADE WITH LOVE