OwlCarousel 2 - 触摸/鼠标拖动时轮播不会按“页面”滑动答案

【问题标题】：OwlCarousel 2 - Carousel do not slide by "page" when touch / mouse draggingOwlCarousel 2 - 触摸/鼠标拖动时轮播不会按“页面”滑动
【发布时间】：2017-02-23 15:09:03
【问题描述】：

我已经设置了我的轮播，以便在单击导航箭头时我的轮播通过“页面”滑动，方法是设置此选项：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
});

【问题讨论】：

标签： jquery touch drag slide owl-carousel-2

【解决方案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();
  }
}

【讨论】：