jquery - bxSlider touch enabled - 禁用垂直触摸事件，因此只有水平触摸事件有效

Question

我可能正在使用我最喜欢的 jquery 滑块插件之一：bxSlider

http://bxslider.com/options#touchEnabled

最近他们更新了一些设备的触控功能。这允许您通过滑动来滚动滑块。

但是在我当前的项目中，我有一个幻灯片，它占据了我网站的整个宽度，当我在设备上查看时，当我用手指向下滚动时，当我到达幻灯片时，我无法向下滚动页面，而是幻灯片从左到右滚动。

所以我的问题是，是否可以禁用垂直触摸事件，以便仅在水平滑动滚动时才有效。

var winnerSlider = $('#slider').bxSlider({

});

如果有人可以帮忙，我有一个小提琴... http://jsfiddle.net/2Fcxw/10/

扫描下方二维码查看设备上的小提琴。

谢谢

Answer 1

$('#slider').bxSlider({
touchEnabled:false
});

这应该有效。

Answer 2

var winnerSlider = $('#slider').bxSlider({
    preventDefaultSwipeY: false
});

preventDefaultSwipeY应该正是您所需要的。 http://bxslider.com/options#preventDefaultSwipeY

现在应该默认设置，所以不需要声明它。

试过你的小提琴，它似乎在当前的 bxSlider (v4. 1. 2) 上运行良好。

Answer 3

对于现在遇到此问题的任何人，preventDefaultSwipeY在最新版本 4.2.15 (4.2.1d) 中不再工作，请参阅https://github.com/stevenwanderski/bxslider-4/issues/1235#issuecomment-465623162

正如作者所说，您需要从此修复第 371 行：

for (i = 1; i <= slider.settings.maxSlides - 1; i++) {

对此：

for (var i = 1; i <= slider.settings.maxSlides - 1; i++) {

在第 1109 行评论/删除：

e.preventDefault();

并在第 1189 行更改：

if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
  e.preventDefault();
  // y axis swipe
} else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
  e.preventDefault();
}
if (e.type !== 'touchmove') {
  e.preventDefault();
}

对此：

if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
  // y axis swipe
} else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
}
if (e.type !== 'touchmove') {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
}

preventDefaultSwipeY正如 MarthyM 在他的回答中指出的那样，不需要使用它默认设置为 false。