猫头鹰传送带2-拖动方向

Question

我正在尝试确定滑块的拖动方向，我该如何实现？我需要它，因为我正在同步2个滑块，所以只要其他一个同步，我就需要更改同步的滑块。到目前为止，只要您使用按钮进行导航，它就可以正常工作，如下所示：

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

这些事件位于sync1滑块上，因此无论何时您以一种或另一种方式移动，它也将以相同的方式移动sync2。当用户拖动滑块以更改它时，我只需要这样做。我可以听拖动事件，但是无法确定是左拖动还是右拖动？

在猫头鹰轮播1中，有一个dragDirection属性，但是似乎消失了。

Answer 1

下面是我的解决方案，似乎与下面的代码可以正常工作-

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

Answer 2

这是我用来relatedTarget.state获取方向的解决方案。

var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
});
owl.on("dragged.owl.carousel", function (event) {
    if (event.relatedTarget.state.direction === "left") {
        $(".owl-carousel").not(this).trigger("next.owl.carousel");
    } else {
        $(".owl-carousel").not(this).trigger("prev.owl.carousel");
    }
});

请注意，我的轮播使用的是同一.owl-carousel类。