javascript - Next 和 Prev 按钮将在 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.options.scrollPerPage = false

base.options.items = 1

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

Answer 1

在没有得到任何人的帮助，甚至是他们网站的官方电子邮件地址后，我解决了我的问题，在移动设备上，next 和 prev 按钮的事件处理程序被分配了两次一种用于点击，一种用于触摸。所以我已经解决了这个问题:在 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;
}