Issue with horizontal scroll in image carousel

Question

I've tried different approaches to set up horizontal scrolling for image carouse and finally got onto this, but unfortunately I cant figure out how to resolve the following issue with Flickity image slider. The browser console shows these errors:

Cannot set property 'x' of undefined
Cannot read property 'x' of undefined

And those the behavior is pretty poor as you can see in this example of codepen.io

$('.gallery').mousewheel(function(e) {
    e.preventDefault();
    var flkty = Flickity.data(this);

    if (!window.wheeling) {
        // console.log('start wheeling!');

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    clearTimeout(window.wheeling);
    window.wheeling = setTimeout(function() {
        // console.log('stop wheeling!');

        delete window.wheeling;

        // reset wheeldelta
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;
    }, 50);

    window.wheeldelta.x += e.deltaFactor * e.deltaX;
    window.wheeldelta.y += e.deltaFactor * e.deltaY;
    if(window.wheeldelta.x > 500 || window.wheeldelta.y > 500 || window.wheeldelta.x < -500 || window.wheeldelta.y < -500){
        window.wheeldelta.x = 0;
        window.wheeldelta.y = 0;

        if(e.deltaX > 0 || e.deltaY < 0){
            flkty.next();
        } else if(e.deltaX < 0 || e.deltaY > 0){
            flkty.previous();
        }
    }

    // console.log(window.wheeldelta);

});

PS: The code works on top of this JQuery plugin .

The way I see the problem when I tested it with a regular mouse wheel, in which actually the wheel stops at the same time when your finger stops, so despite the errors in the console log you could still easily continue to navigate, month ago I changed my mouth to Apple Magic Mouse and if I flip strong I notice like the error log is still going up counting errors and I cant continue until it reaches the end, I didnt yet tested it on notebook touchpads, but I feel like the same problem will remain there and I am looking for they way to fix it.

Answer 1

You haven't set window.wheeldelta variable anywhere, so you can't assign x or y to it. Add somewhere in the beginning of code:

window.wheeldelta = {x: 0, y: 0};