下一个和上一个按钮将在OWL Carousel上滑动2个项目

Question

我正在使用OWL Carousel（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.currentItem += base.options.scrollPerPage === true ? base.options.items : 1;

base.options.scrollPerPage = false

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