AnimakitSlider
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.