bxSlider触摸功能已启用 - 禁用垂直触摸事件，仅允许水平触摸事件工作。

Question

我正在使用我最喜欢的 jQuery 幻灯片插件之一：bxSlider

http://bxslider.com/options#touchEnabled

最近他们更新了一些触摸设备的功能。这使得您可以通过滑动来滚动您的滑块。

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

所以我的问题是，是否可能禁用垂直触摸事件，使其仅在水平滚动时起作用。

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

});

如果有人能帮忙的话，我有一个 JSFiddle… http://jsfiddle.net/2Fcxw/10/

扫描下面的二维码可以在设备上查看 Fiddle。

谢谢

- Joshc

Answer 1

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

这应该可以起作用。

- Johnny

---

这不是 OP 请求的解决方案，它会禁用 X 和 Y 两个方向上的所有触摸，他只想禁用 Y 方向。 - Alex

这帮助了我！谢谢！ - Daniel Garcia Sanchez

Answer 2

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

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

现在默认情况下应该已经设置了它，所以没有必要声明。

尝试了您的 fiddle，在当前的 bxSlider（v4.1.2）下似乎工作正常。

- MarthyM

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++) {

To this:

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();
}

To this:

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。

- vard