下一个和上一个按钮将在OWL旋转木马上滑动2个项目

Question

我正在使用OWL旋转木马（1.3.3），如下所示

$(".CardSlider").owlCarousel({
  navigation: true,
  navigationText: ["ﺑﻌﺪﻯ", "ﻗﺒﻠﻰ "],
  pagination: false,
  slideSpeed: 300,
  paginationSpeed: 400,
  singleItem: true,
});

桌面浏览器上一切都很好，但在移动设备上，当我触摸Next或Prev按钮时，它会滑动2个项目，

首先，我对事件处理程序的重新订阅持怀疑态度，所以我添加了这个选项mouseDrag : false，但没有任何更改。

然后我打开了owl脚本文件，并用next方法设置了一些警报。当显示警报时，功能是可以的，我的意思是它幻灯片1项。我还在那个方法中检查这些变量base.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

base.options.scrollPerPage=错误

base.options.items=1

(base.options.scrollPerPage === true ? base.options.items : 1)=1

Answer 1

在没有得到任何人的帮助后，甚至没有得到他们网站的官方电子邮件地址，我解决了我的问题，在移动设备上，next和prev按钮的事件处理程序被分配了两次，一次分配给click，一次为touch。因此，我解决了这个问题：在owl.carousel.js第424行中，我已替换了此代码

buttonsWrapper.on("touchstart.owlControls mousedown.owlControls", "div[class^="owl"]", function (event) {
  event.preventDefault();
});
buttonsWrapper.on("touchend.owlControls mouseup.owlControls", "div[class^="owl"]", function (event) {
  event.preventDefault();
  if ($(this).hasClass("owl-next")) {
    base.next();
  } else {
    base.prev();
  }
});

用这个

if (isMobile()) {
  buttonsWrapper.on("touchstart.owlControls", "div[class^="owl"]", function (event) {
    event.preventDefault();
  });
  buttonsWrapper.on("touchend.owlControls ", "div[class^="owl"]", function (event) {
    event.preventDefault();
    if ($(this).hasClass("owl-next")) {
      base.next();
    } else {
      base.prev();
    }
  });
}
else {
  buttonsWrapper.on("touchstart.owlControls mousedown.owlControls", "div[class^="owl"]", function (event) {
    event.preventDefault();
  });
  buttonsWrapper.on("touchend.owlControls mouseup.owlControls", "div[class^="owl"]", function (event) {
    event.preventDefault();
    if ($(this).hasClass("owl-next")) {
      base.next();
    } else {
      base.prev();
    }
  });
}

我还在js文件的末尾添加了这个函数

function isMobile() {
    return navigator.userAgent.match(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i) !== null;
}