0.1.0 • Published 5 years ago
@fabianb/react-styled-slides v0.1.0
react-styled-slides
A styled-component slider for React.
1. Import & state
import Slider from "./Slider";
state = {
slideIndex: 0,
}
2. Set up
<Slider
slideIndex={0}
slidesInView={1}
gutterWidth={20}
>
<div>Slide1</div>
<div>Slide2</div>
<div>Slide3</div>
</Slider>
3. Add logics
goToSlide = (increment) => {
const { slideIndex } = this.state
this.setState({
slideIndex: slideIndex + increment
})
};
<Slider
...
prevSlide={() => this.goToSlide(-1)} // When you swipe or drag right
nextSlide={() => this.goToSlide(1)} // When you swipe or drag left
>
...
Check out this demo.
0.1.0
5 years ago