Animakit-slider NPM

AnimakitSlider

React component for the blocks sliding. Supports both horizontal and vertical modes and the ability to loop and skip slides during animation.

<AnimakitSlider slide={this.state.index}>
  <Slide />
  <Slide />
  <Slide />
</AnimakitSlider>

npm install animakit-slider

Property	Required	Type	Default Value	Available Values	Description
slide	true	string	Key of the first child	Key of the component child	Current visible slide, that contains a child with the corresponding key
vertical	false	bool	`false`	`true`, `false`	Direction of animation
loop	false	bool	`false`	`true`, `false`	If true, the component will choose the shortest way between the slides. (For example, it will animate directly from the last slide to first)
skip	false	bool	`false`	`true`, `false`	If true, the component will animate directly to the selected slide and will not show the slides located between
flexible	false	bool	`false`	`true`, `false`	If true, the component size automatically to fit the current slide. By default, the component selects the size of the largest slide.
duration	false	number	`500`	Any integer number	Duration of animation
easing	false	string	`cubic-bezier (.165,.84,.44,1)`	Any easing function	Easing function of animation