Jquery 猫头鹰转盘移动方向(拖动上一次/下一次单击)

Jquery 猫头鹰转盘移动方向(拖动上一次/下一次单击),jquery,carousel,owl-carousel,Jquery,Carousel,Owl Carousel,我正在制作一个网站,用户应该在其中获取分块的内容,就像一个简短的powerpoint演示文稿,用户可以在包含带HTML的div的幻灯片之间来回移动 为此,我认为使用类似旋转木马的演示视图是一个好主意。我查看了它的afterMovecallback参数,但在文档中没有看到任何关于如何获得运动方向的信息 换句话说,如果用户向左拖动或单击“下一步”按钮,我想调用函数n如果用户向右拖动或单击“上一步”按钮,我想调用函数p。这是可能的还是我应该查看其他插件?使用插件的dragDirection属性我需要做

我正在制作一个网站,用户应该在其中获取分块的内容,就像一个简短的powerpoint演示文稿,用户可以在包含带HTML的div的幻灯片之间来回移动

为此,我认为使用类似旋转木马的演示视图是一个好主意。我查看了它的
afterMove
callback参数,但在文档中没有看到任何关于如何获得运动方向的信息


换句话说,如果用户向左拖动或单击“下一步”按钮,我想调用函数
n
如果用户向右拖动或单击“上一步”按钮,我想调用函数
p
。这是可能的还是我应该查看其他插件?

使用插件的dragDirection属性

我需要做同样的操作,但只用于下一次/上一次单击(我不使用拖动)。 因为我没有找到任何正确的方法来获取移动方向,所以我重写了click函数以添加一个信息类:

    $(".owl-next").click(function(){
      $('.owl-carousel').addClass('move-next');
    })

    $(".owl-prev").click(function(){
        $('.owl-carousel').addClass('move-prev');
    })
然后在后移功能中:

afterMove: function() {
    if( $('.owl-carousel').hasClass('move-next') ) {
          // Click next: your code
          $('.owl-carousel').removeClass('move-next');
    } else if ( $('.owl-carousel').hasClass('move-prev') ) {
          // Click prev: your code
          $('.owl-carousel').removeClass('move-prev');
    }
}
也许这不是最好的方法,但至少我能得到我想要的。

我在github.com上读到

/******/

var owl = $('#your-carousel-selector').data('owlCarousel');

$(document.documentElement).keyup(function(event) {
    // handle cursor keys
    if (event.keyCode == 37) {
        owl.prev();
    } else if (event.keyCode == 39) {
        owl.next();
    }
}); 

使用relatedTarget上的state属性获取方向

owl.on("drag.owl.carousel", function (event) {
    console.log(event.relatedTarget.state.direction);
});

这似乎只处理拖动事件(
owl.this.dragDirection
在按下按钮时变为
未定义的
。我是否需要对用户单击“上一步”和“下一步”按钮的时间进行单独检查?我喜欢这样对SO上的旧问题获得新答案。我不再从事该项目,因此我无法测试您的代码,但它看起来很好,值得考虑d答案。谢谢:)在Carousel2中是不同的。owl.trigger('next.owl.carousel');