I made a slider using splidejs, but ran into a problem: on macOS, the slider doesn’t scroll with a horizontal touchpad swipe, even though everything works fine on Windows. What is the problem? Here is an example on jsfiddle: https://jsfiddle.net/p039k4cu/4/
const splide = document.querySelector('.slider');
const interval = 5000; // The autoplay interval duration in milliseconds
const speed = 1000; // Slider transition speed in ms
const dragMinThreshold = { // Minimum distance in pixels to start dragging
mouse: 0,
touch: 10,
};
const flickPower = 500; // Determine the power of "flick". The larger number this is, the farther the carousel runs.
const wheelMinThreshold = 20; // The threshold to cut off the small delta produced by inertia scroll.
const wheelSleep = 500; // The sleep duration in milliseconds until accepting next wheel.
const splideInstance = new Splide(splide, {
autoWidth: true,
arrows: false,
pagination: false,
updateOnMove: true,
autoplay: false,
interval,
perPage: 1,
type: 'loop',
gap: '1rem',
drag: true,
dragMinThreshold,
flickMaxPages: 1,
flickPower,
speed,
snap: false,
wheelMinThreshold,
wheelSleep,
});
let lastTime = 0
function onWheel(e) {
if (e.cancelable) {
const { deltaX } = e;
const backwards = deltaX < 0;
const timeStamp = e.timeStamp;
const min = splideInstance.options.wheelMinThreshold || 20;
const sleep = splideInstance.options.wheelSleep || 300;
if (Math.abs(deltaX) > min && timeStamp - lastTime > sleep) {
splideInstance.go(backwards ? '<' : '>');
lastTime = timeStamp;
}
}
}
splide.addEventListener('wheel', onWheel);
splideInstance.mount();
PS: I don’t have any macOS device, so I cannot debug. Any help will be very much appreciated.