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

Question

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

http://bxslider.com/options#touchEnabled

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

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

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

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

});

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

扫描下面的qr以查看设备上的小提琴。

由于

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.14）中均不再可用，请参阅https://github.com/stevenwanderski/bxslider-4/issues/1235#issuecomment-465623162

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

for (var 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。