animakit-slider

0.1.3 • Public • Published

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.

Sponsored by Evil Martians

Package Sidebar

Install

npm i animakit-slider

Weekly Downloads

2

Version

0.1.3

License

MIT

Last publish

Collaborators

  • askd