👨🏼🔧 Slidemanager
Simple slide manager 💫 Focused on animations.
Installation
npm add slidemanager
Usage
import Slidemanager from 'slidemanager'
const slider = new Slidemanager({
el: document.querySelector('#gallery'),
callback({ current, previous, direction, done }) {
// Your animations here
// ...
// Call done() when your animation is complete
done()
}
})
Parameters
Options
- 🖼
el
: DOM element to attach the swipe event to. If not given, please provide alength
parameter. - ℹ️
callback
: function called when user swipes or slide changes automatically. - 🔄
loop
: whether to stop at the last / first slide or not. (Defaultfalse
) ▶️ auto
: set it totrue
to automatically switch to the next slide. (Defaultfalse
)- ⏯
interval
: specifies the interval in seconds between each slide change.auto
must betrue
. (Default5
) ↕️ vertical
: if set totrue
, the swipe movement to change the current slide will need to be vertical. (Defaultfalse
)- 🔢
length
: number of slides. If not given, The number of slides will be the number ofel
's children - *️⃣
swipe
: iffalse
, the swipe touch movement detection is disabled. (Defaulttrue
) - 🈁
mouseSwipe
: Whether the swipe movement must be checked on the mouse or not. (Defaultfalse
) - 🔀
random
: Switch to random slides instead of next and previous ones. Enables automatically theloop
option. (Defaultfalse
) - #️⃣
startAt
: The index from which to start the slider on initialization. (Default0
) - ⏭
threshold
: Amount of pixels required to change slide when swiping (Default60
) - ⏺
init
: Whether to init the manager immediately or not. Iffalse
, call the.init()
method to initialize the manager. (Defaulttrue
)
Methods
- 👈
prev()
: goes to the previous slide - 👉
next()
: goes to the next slide - 🚗
goTo(index, data)
: goes to the specified index, you can pass data which can be recovered in the callback - 🚦
start()
/stop()
: starts / stops the automatic sliding - 🛠
init()
: adds event listeners. Call this when theinit
option is set tofalse
- ⚰️
destroy()
: removes event listeners and stops the slider
Callback
The callback
function receives a parameter containing the following properties :
-
current
: New index -
previous
: Previous index -
direction
: 1 for next, -1 for previous -
done
: the function to call when you're done with your animations -
data
: some data that may be given from a call togoTo()
Instance properties
The returned Slidemanager instance exposes the following properties :
-
index
: The current index -
max
: The last element's index -
changing
: Whether the slider is currently moving or not
License
MIT, see LICENSE.md for details.