mouseWheel plugin
Navigate slides by scrolling the mouse wheel or trackpad over the slider. A cooldown prevents skipping slides mid-transition.
Import
import { mouseWheel } from '@andresclua/sliderkit-plugins'Usage
import { Slider } from '@andresclua/sliderkit'
import { mouseWheel } from '@andresclua/sliderkit-plugins'
new Slider('#el', {
items: 1,
loop: true,
speed: 300,
plugins: [mouseWheel()],
})Options
| Option | Type | Default | Description |
|---|---|---|---|
threshold | number | 120 | Accumulated deltaY (in pixels) required to trigger a slide change. Increase for a harder scroll, decrease for a lighter touch. |
invert | boolean | false | Reverse scroll direction (scroll down → go backward). |
Cooldown behaviour
The plugin accumulates deltaY across consecutive wheel events. Once the total crosses threshold, a slide change fires and a cooldown locks further input for speed + 200 ms. This prevents trackpad momentum from jumping multiple slides. The accumulator resets automatically if the user stops scrolling for 80 ms.
Full example
new Slider('#el', {
items: 1,
loop: true,
speed: 400,
plugins: [
mouseWheel({ threshold: 200, invert: false }),
],
})The plugin calls event.preventDefault() on every wheel event, preventing the page from scrolling at the same time. The listener is attached with passive: false to allow this.