README
slider-manager
Usage
npm install slider-manager --save
import Manager from 'slider-manager'
import gsap from 'gsap'
const slides = [].slice.call(document.querySelectorAll('.slides'))
const slider = new Manager({
length: slides.length,
loop: true,
callback: (event) => {
const index = event.current
const previous = event.previous
const down = event.direction === 'downwards'
slider.animating = true
this.videos[index].play()
const windowheight = window.innerHeight
const tl = new TimelineMax({ paused: true, onComplete: () => {
this.videos[previous].pause()
slider.animating = false
}})
tl.staggerTo(slides, 1, { cycle: {
y: (loop) => index === loop ? 0 : loop < index ? -windowheight : windowheight
}, ease: Expo.easeInOut}, 0, 0)
tl.restart()
}
})
slider.init()
options
el
: HTMLElement to listen for scroll/touch events - defaults to document.bodydirection
: 'x' or 'y' - defaults to 'y'loop
: true of false - defaults to falsedelta
: delta limiter for scroll/touch events - defaults to 1limitInertia
: if set to true, leverage the limitInertia option of virtual-scroll to distinguish between user-initiated and inertial scrolling. Prevents callback from firing multiple times per scroll - defaults to false.callback
: function called when user has swiped or scrolled
methods
init
: add event listenersgoTo(index)
: goes to the slide indexdestroy
: remove event listeners
changelog
1.0.6
: added direction to options, so it listens to either deltaX or deltaY depending on the desired option1.1.6
: added limitInertia to options, that when set to true fixes a behavior where multiple callbacks are fired for a single user-initiated scroll due to inertial scrolling.
License
MIT, see LICENSE.md for details.