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按钮的事件处理程序被分配了两次{{1} {和click一个。所以我已经解决了这个问题：在touch第424行，我已经替换了此代码

owl.carousel.js

用这个

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文件末尾添加了此功能

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

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

1 个答案: