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

Owl carousel 2 - drag direction

本文关键字：方向 拖动 旋转木马 猫头鹰      更新时间：2023-09-26

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

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

这些事件都在sync1滑块上，所以无论何时，它都会以相同的方式移动sync2。我只需要在用户拖动滑块来更改它时这样做。我可以听到拖动的事件，但我无法确定它是向左拖动还是向右拖动？

在猫头鹰旋转木马1中，有一个dragDirection属性，但似乎已经不复存在了。

下面是我的解决方案，它似乎可以很好地使用下面的代码-

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

这也可以通过比较owl-stage元素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");
    }
});

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

我有两个猫头鹰转盘-猫头鹰1和猫头鹰2。当猫头鹰出现问题时，猫头鹰也必须这样做。解决方案是：

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函数中的事件是很重要的。relatedTarget['_drag']['direction']，因为change.owl.carousel事件在事件之前触发。relatedTarget['_drag']['ddirection']已更改

相关文章：