禁用猫头鹰旋转木马中第一个和最后一个项目的反弹

Disable bounce on first and last item in Owl Carousel

本文关键字：项目 最后一个 第一个 猫头鹰 旋转木马      更新时间：2023-09-26

我使用的是猫头鹰旋转木马滑块。

当您到达滑块的最后一个或第一个项目时，您仍然可以拖动滑块，尽管不再有项目。相反，当你拉下一个本地移动应用程序来刷新内容时，会出现反弹效应。

演示：（链接已删除，因为官方文档已不存在）向右拖动滑块，它将反弹回来。

有没有可能禁用反弹效果？

是的，您可以禁用反弹效果。我很难找到它，但我做到了。

只需删除或注释这行代码在owl.carousel.js中即可：

base.newPosX = Math.max(Math.min(base.newPosX, minSwipe()), maxSwipe());
if (base.browser.support3d === true) {
    base.transition3d(base.newPosX);
} else {
    base.css2move(base.newPosX);
}


例如

owl.carousel.js

function dragMove(event) {
    var ev = event.originalEvent || event || window.event,
    minSwipe,
    maxSwipe;
    base.newPosX = getTouches(ev).x - locals.offsetX;
    base.newPosY = getTouches(ev).y - locals.offsetY;
    base.newRelativeX = base.newPosX - locals.relativePos;
    if (typeof base.options.startDragging === "function" && locals.dragging !== true && base.newRelativeX !== 0) {
        locals.dragging = true;
        base.options.startDragging.apply(base, [base.$elem]);
    }
    if ((base.newRelativeX > 8 || base.newRelativeX < -8) && (base.browser.isTouch === true)) {
        if (ev.preventDefault !== undefined) {
            ev.preventDefault();
        } else {
            ev.returnValue = false;
        }
        locals.sliding = true;
    }
    if ((base.newPosY > 10 || base.newPosY < -10) && locals.sliding === false) {
        $(document).off("touchmove.owl");
    }
    minSwipe = function () {
        return base.newRelativeX / 5;
    };
    maxSwipe = function () {
        return base.maximumPixels + base.newRelativeX / 5;
    };
    // base.newPosX = Math.max(Math.min(base.newPosX, minSwipe()), maxSwipe());
    // if (base.browser.support3d === true) {
    //     base.transition3d(base.newPosX);
    // } else {
    //     base.css2move(base.newPosX);
    // }
}


希望能有所帮助。

相关文章：