AnimakitSlider

WARNING: Currently unmaintained because of lack of interest, activity and resources

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

Usage

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

Demo

Installation

npm install animakit-slider

Properties

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

Origin

AnimakitSlider is the part of Animakit. See https://animakit.github.io for more details.