猫头鹰旋转木马 2 - 拖动方向答案

【问题标题】：Owl carousel 2 - drag direction猫头鹰旋转木马 2 - 拖动方向
【发布时间】：2015-03-23 15:45:00
【问题描述】：

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

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

而且这些事件都在 sync1 滑块上，因此无论您选择哪种方式，它也会以相同的方式移动 sync2。当用户拖动滑块来更改它时，我只需要这样做。可以监听拖拽事件，但无法判断是左拖还是右拖？

在 owl carousel 1 中有一个 dragDirection 属性，但似乎没有了。

【问题讨论】：

标签： javascript jquery owl-carousel

【解决方案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 fiddle

【讨论】：

【解决方案2】：

这也可以通过比较 owl 舞台元素的 X 位置的起始值和当前值来实现，如下所示：

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");
    }
});

【讨论】：

【解决方案3】：

这是我使用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 类。

【讨论】：

【解决方案4】：

我有两个猫头鹰旋转木马 - owl1 和 owl2。当 owl1 发生某些事情时，owl2 也必须这样做。解决办法是：

owl1.on("change.owl.carousel", function(event){
    setTimeout(function(){
        if (event.relatedTarget['_drag']['direction'] == "right") {
           owl2.trigger('prev.owl.carousel');
           event.relatedTarget['_drag']['direction'] = null;
        } else {
            owl2.trigger('next.owl.carousel');
        }
    }, 0);
});

在 setTimeout 函数中检查 event.relatedTarget['_drag']['direction'] 很重要，因为 change.owl.carousel 事件在 event.relatedTarget['_drag']['direction'] 改变之前触发

【讨论】：