jquery - Owl Carousel 移动方向(拖动+上一个/下一个单击)

标签 jquery carousel owl-carousel

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

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

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

最佳答案

我需要做同样的事情,但仅限于下一个/上一个点击(我不使用拖动)。 由于我没有找到任何正确的方法来获取移动方向,因此我重写了单击函数以添加信息类:

    $(".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');
    }
}

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

关于jquery - Owl Carousel 移动方向(拖动+上一个/下一个单击),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22659237/

相关文章:

angular - 如何在 Angular2 中使用 owl-carousel 异步更改 ng-content

javascript - 如何从 CKEditor 实例中分离 'dragstart' 事件?

jquery - 如何在 div 中定位元素,使它们随 div 移动而移动

jquery - Bootstrap 轮播上一个控件无法正确滑动

javascript - 调整大小时 jQuery 轮播导航中断

html - Bootstrap Carousel - 带标题的链接图像

javascript - Owl Carousel 2 找到中心项目

javascript - owlcarousel2 无限循环和导航

javascript - 如何在 TypeScript 中将类方法附加为 jQuery 事件处理程序

jquery .html() 不适用于 ie8