猫头鹰轮播 2 - 单击幻灯片时处于活动状态拖动

Owl Carousel 2 - Drag active when clicking a slide

本文关键字：活动状态 拖动 幻灯片 单击 猫头鹰      更新时间：2023-09-26

我正在使用猫头鹰旋转木马 2，并且我有(并且想要(鼠标拖动和触摸拖动活动。

但是，当我单击幻灯片中的任何内容时，owl 认为我拖动并更改了幻灯片，因此它会在拖动回调时触发。我没有更改幻灯片，我只是单击了幻灯片("鼠标向下"，"鼠标向上"在DragStart上触发(。

我希望能够执行某些操作 IF 并且仅当我通过拖动移动更改特定幻灯片时(例如：我从幻灯片 1 转到幻灯片 2(。更具体地说，我想阻止 onDragStart，除非我真的从一张幻灯片更改为另一张幻灯片。

我做错了什么？

你可以尝试这样的事情。在全局变量 (onDrag( 中存储当前幻灯片更改之前的索引。幻灯片更改(翻译(后，再次检查索引，看看索引是否仍然相同。如果不是 --> 幻灯片已更改。

此处列出了所有事件：http://www.owlcarousel.owlgraphic.com/docs/api-events.html

var indexBeforeChange = -1;
$(function () {
    if ($('#slider .item').length > 1) {
        $('#slider').owlCarousel({
            onDrag: slideBeforeChange,
            onTranslated: slideChanged
        });
    }
});
function slideBeforeChange(event) {
    indexBeforeChange = event.page.index;
    console.log('indexBeforeChange: ' + indexBeforeChange);
}
function slideChanged(event) {
    var indexAfterChange = event.page.index;
    if (indexAfterChange != indexBeforeChange) {
        console.log('Slide changed, indexAfterChange: ' + indexAfterChange);
    } else {
        console.log('Slide did not change');
    }
}
相关文章：