1.0.6 • Published 4 years ago
react-web-slider v1.0.6
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