2017-02-23 1 views
0

내 회전식 슬라이드가 '화살표'를 클릭하여 '페이지'로 슬라이드하도록이 회전식을 설정했습니다.이 옵션을 설정하면 입니다. 터치/마우스 드래그를 할 때도 페이지마다 슬라이드를 예상했지만 항목 1을 1 씩 슬라이드했습니다.OwlCarousel 2 - 터치/마우스 드래그 할 때 '페이지'로 회전하지 않습니다.

터치/마우스 드래그로 페이지를 슬라이드 시키려면 올바른 구성은 무엇입니까?

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

답변

0

당신은, 드래그하기 전에 현재 항목의 인덱스를 저장 드래그 한 후 복원과 올빼미 클래스에서 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(); 
    } 
} 
관련 문제