A simple react component for swipe, tabs, carousel, one page scroll ..., with animation hooks. tweening, tween callbacks. works on PC and touch devices
###NOTICES:
- since 0.1.1, pass
swipe
prop toDeck
only enable|disable swipe functionality, not including wheel control, which requires a seperatedwheel
prop - since 0.2.2, slide classNames for animation hooks are using cssModules, see below
npm i react-slide-deck --save
Demo
also open on touch device, see the swipe effect
For development
npm installbower installgulp dev// then open localhost:3003
build
gulp build
Usage:
; ; ; // your styles, css modules maybe? { superprops; thisstate = current: 0 horizontal: true swipe: true factor: 03 loop: true; } { let target = eventtarget; let index = ArrayprototypeindexOf; this; } { console; } { console; console; } { console; } { const slideClasses = current: stylescurrentSlide // will be concat to className for current slide when it finished entering entering: stylescurrentSlideEntering // will be concat to className for current slide during its entering prev: stylesprevSlide // ... leaving: stylesprevSlideLeaving //... before: stylesbefore // after: stylesafter // ; return <div> <Deck ...thisstate onSwitching=::thisonSwitching onSwitchDone=::thisonSwitchDone slideClasses=slideClasses> <DeckSlide className='bg-black'> 1 </DeckSlide> <DeckSlide className='bg-green'> 2 </DeckSlide> <DeckSlide className='bg-red'> 3 </DeckSlide> <DeckSlide className='bg-yellow'> 4 </DeckSlide> </Deck> <ul className='indicators' onClick=::thischange> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> ; }
<Deck className // you may need to set you deck's width, height,... current // current slide index horizontal // boolean, direction for the slides. `vertical` is removed wheel // can be control by wheel or not swipe // can swipe or not for touch devices animate // boolean, should apply animation for indicator click switch or not, see demo link factor // swipe distance used to determine whether to swipe forward or abort on touch devices. // if (swipeDistance / width(or height for vertical)) > factor, then will switch to next slide, otherwise return to the current slide. loop // scroll down on the last Deck.Slide => transition to the first Deck.Slide.(first => last as well). only work when `swipe` is set dura // duration for slide transition, optional. default is 1400ms easing // `function|string` tweening easing function for transition between slides. see detail below, onSwitching // function(progress, deck) /*fired on every tweening transition. `deck` is the component instance of Deck, useful for accessing data like deck.status, deck.state.distance ...*/ onSwitchDone // function({prev, current}) /*fired when slide transition is finished*/ onSwitchStarted // function({prev:current, current:next}) /*fired before a tween transition started*/ slideClasses // optional, Object, { current, prev, entering, leaving, before, after }, // useful css class hook for Slide animation // current: applied to the `className` of current Slide when it entered // entering: applied to the `className` of current Slide if it is entering // prev: applied to the `className` of previous Slide when it left // leaving: applied to the `className` of previous Slide when it is leaving // before: applied to the `className` for Slides whose index < the index of current Slide // after: applied to the `className` for Slides whose index > the index of current Slide > <DeckSlide> content </DeckSlide> <DeckSlide> content2 </DeckSlide></Deck>
easing
:
function(currentTime/duration)
a function used to do the tweening easing effect, take one argumentstring
, name of built in easing function. seesrc/ease.js
for details
Note.
-
it doesn't provide the slide indicators(usually for slides navigation), because it's hard to meet all needs.
-
if you need slide indicators, do what you want, just provide the
current
slide index to<Deck current={current}>
, it will take care of the transition