OwlCarousel 2 - 当触摸/鼠标拖动时，Carousel不会被“页面”滑动

Question

我设置了我的旋转木马，以便在点击导航箭头时通过“页面”滑动我的旋转木马，方法是设置此选项：slideBy: 'page'。我预计旋转木马也会在触摸/鼠标拖动时逐页滑动，但它只会逐个滑动我的项目。

在触摸/鼠标拖动时按页面滑动的正确配置是什么？

这是我目前的配置：

$('.owl-carousel').owlCarousel({
    loop: true,
    nav: false,
    navText: false,
    navSpeed: 200,
    dots: false,
    dotsSpeed: 800,
    responsive: {
        0: {
            items: 1,
            slideBy: 'page'
        },
        320: {
            items: 2,
            slideBy: 'page'
        },
        768: {
            items: 4,
            slideBy: 'page'
        },
        992: {
            items: 6,
            slideBy: 'page'
        }
    },
    slideBy: 'page',
    lazyLoad: true
});

Answer 1

您可以在拖动之前保存当前项目的索引，拖动后恢复它并使用Owl类中的next或prev方法。 您可以在this jsfiddle中找到该示例。

// Empty object where we can store current item's index before drag
var transient = {};

$('.owl-carousel').owlCarousel({
    slideBy: 'page',
    onDrag: onDrag.bind(transient),
    onDragged: onDragged.bind(transient)
});

function onDrag(event) {
  this.initialCurrent = event.relatedTarget.current();
}

function onDragged(event) {
  var owl = event.relatedTarget;
  var draggedCurrent = owl.current();

  if (draggedCurrent > this.initialCurrent) {
    owl.current(this.initialCurrent);
    owl.next();
  } else if (draggedCurrent < this.initialCurrent) {
    owl.current(this.initialCurrent);
    owl.prev();
  }
}