Owl carousel 2 - drag direction

Question

I am trying to determine the drag direction of a slider, how do i achieve this? I need it since i am syncing 2 sliders, so i need to change the synced slider whenever the other one does. So far it works as long as you use the buttons to navigate, like this:

$('.owl-next').click(function() {
    sync2.trigger('next.owl.carousel');
})
$('.owl-prev').click(function() {
    sync2.trigger('prev.owl.carousel');
})

And these events are on the sync1 slider, so whenever you go one or the other way, it will also move the sync2 the same way. I just need to do this when the user DRAGS the slider to change it. I can listen to the dragged event, but i have no way to determine if it was a left or right drag?

In owl carousel 1 there was a dragDirection property, but that seems to be gone.

Answer 1

Below is my solution which seems to be working fine with code below -

$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:5
    }
 }
}).on("dragged.owl.carousel", function (event) {
console.log('event : ',event.relatedTarget['_drag']['direction'])
});

JS fiddle

Answer 2

This can also be achived by comparing the start and current values of the owl stage element's X position like this :

var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
});
owl.on("change.owl.carousel", function (e) {
    if (e.relatedTarget._drag["stage"]["start"].x < e.relatedTarget._drag["stage"]["current"].x) {
       console.log("move right");
    } else {
        console.log("move left");
    }
});