OwlCarousel 2 - Le carrousel ne glisse pas par "page" lorsque vous touchez/souris

Question

J'ai configuré mon carrousel pour que mon carrousel glisse par "page" en cliquant sur les flèches de navigation, en définissant cette option: slideBy: 'page'. Je m'attendais à ce que le carrousel glisse aussi par page quand on fait glisser la souris, mais il ne fait que glisser mes objets 1 par 1.

Quelle est la bonne configuration pour le faire glisser par page en faisant glisser la souris?

Voici ma configuration actuelle:

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

Vous pouvez sauvegarder l'index de l'élément en cours avant de faire glisser, restaurer après avoir fait glisser et utiliser next ou prev méthodes de la classe Owl. Vous pouvez trouver l'exemple dans 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(); 
    } 
}