OwlCarousel 2 - Карусель не скользит по "странице" при перетаскивании касанием / мышью

Question

Я настроил свою карусель так, чтобы моя карусель скользила по "странице" при нажатии на стрелки навигации, установив эту опцию: slideBy: 'page', Я ожидал, что карусель также будет скользить по странице при перетаскивании касанием / мышью, но она только сдвигает мои элементы 1 на 1.

Какова правильная конфигурация, чтобы сделать его скользящим по странице при перетаскивании мышью?

Вот моя текущая конфигурация:

$('.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

Вы можете сохранить индекс текущего элемента перед перетаскиванием, восстановить его после перетаскивания и использовать next или же prev методы из класса Owl. Вы можете найти пример в этом 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();
  }
}