deku-swipe

Swipe.js as a deku component

Installation

npm install deku-swipe

Deku Versions

• 1.0.x - depends on Deku 0.5.x

Usage

 
/** @jsx dom */
import dom from 'magic-virtual-element'
import {render, tree} from 'deku'
import Swipe from 'deku-swipe'
 
const app = tree(	
  <Swipe arrows={true} startSlide={2} speed={1200} arrowPrev='ey prev' arrowNext='ey next'>
    <div>slide 0</div>
    <div>slide 1</div>
    <div>slide 2</div>
    <div>another slide</div>
  </Swipe>
);
 
render(app, document.getElementById('root'))

Example styles

.deku-swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.deku-swipe__wrap {
  overflow: hidden;
  position: relative;
  height: 100px;
  background-color: black;
  color: pink;
}
.deku-swipe__wrap > div {
  float:left;
  width:100%;
  position: relative;
}

Props

• startSlide Integer (default:0) - index position Swipe should start at

• speed Integer (default:300) - speed of prev and next transitions in milliseconds.

• auto Integer - begin with auto slideshow (time in milliseconds between slides)

• continuous Boolean (default:true) - create an infinite feel with no endpoints

• callback Function - runs at slide change.

• transitionEnd Function - runs at the end slide transition.

Development

npm install
npm run build
npm test
npm start

License

MIT