jquery - 猫头鹰旋转木马移动方向（拖动 + 上一个/下一个点击）

Question

我正在创建一个用户应该以块的形式获取内容的网站，就像一个简短的 powerpoint 演示文稿，用户可以在包含带有 HTML 的 div 的幻灯片之间来回移动。

为此，我认为使用类似轮播的演示视图是个好主意。我查看了Owl-carousel及其afterMove回调参数，但我在文档中没有看到有关如何获取运动方向的任何内容。

换句话说，如果用户向左拖动或单击 Next 按钮，我想调用 functionn如果用户向右拖动或单击 Previous 按钮，我想调用 function p。这是可能的还是我应该研究其他插件？

Answer 1

我需要做同样的事情，但只针对下一个/上一个点击（我不使用拖动）。由于我没有找到任何正确的方法来获取移动方向，因此我重写了 click 函数以添加一个信息类：

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

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

然后在 afterMove 函数中：

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

可能不是最好的方法，但至少我可以得到我想要的。

Answer 2

使用插件的dragDirection属性

Answer 3

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

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

Answer 4

我在 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();
    }
});