图像轮播中的水平滚动问题
Issue with horizontal scroll in image carousel
我尝试了不同的方法来为图像轮播设置水平滚动,并最终解决了这个问题,但不幸的是,我无法弄清楚如何解决 Flickity[= 的以下问题26=] 图像滑块。浏览器控制台显示这些错误:
Cannot set property 'x' of undefined
Cannot read property 'x' of undefined
正如您在此 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);
});
P.S:代码在 this JQuery plugin.
之上运行
当我用普通的鼠标滚轮测试它时,我发现问题的方式是,当你的手指停止时,滚轮实际上同时停止,所以尽管控制台日志中有错误,你仍然可以轻松地继续导航,一个月前我改用 Apple Magic Mouse,如果我用力翻转,我会注意到错误日志仍在上升,我无法继续直到它到达终点,我还没有在笔记本触摸板上测试过它,但我感觉同样的问题会一直存在,我正在寻找他们解决问题的方法。
您还没有在任何地方设置 window.wheeldelta
变量,因此您不能将 x
或 y
分配给它。在代码开头的某处添加:
window.wheeldelta = {x: 0, y: 0};
我尝试了不同的方法来为图像轮播设置水平滚动,并最终解决了这个问题,但不幸的是,我无法弄清楚如何解决 Flickity[= 的以下问题26=] 图像滑块。浏览器控制台显示这些错误:
Cannot set property 'x' of undefined
Cannot read property 'x' of undefined
正如您在此 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);
});
P.S:代码在 this JQuery plugin.
之上运行当我用普通的鼠标滚轮测试它时,我发现问题的方式是,当你的手指停止时,滚轮实际上同时停止,所以尽管控制台日志中有错误,你仍然可以轻松地继续导航,一个月前我改用 Apple Magic Mouse,如果我用力翻转,我会注意到错误日志仍在上升,我无法继续直到它到达终点,我还没有在笔记本触摸板上测试过它,但我感觉同样的问题会一直存在,我正在寻找他们解决问题的方法。
您还没有在任何地方设置 window.wheeldelta
变量,因此您不能将 x
或 y
分配给它。在代码开头的某处添加:
window.wheeldelta = {x: 0, y: 0};