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.