我正在尝试确定滑块的拖动方向,如何实现这一点?我需要它,因为我正在同步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']已更改