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方法。 您可以在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(); 
    } 
}