Question

我有一个猫头鹰旋转木马设置。我试图跳到特定项目的地方。这是一个小提琴。

我正在使用owl.goTo直接跳转到某个项目。

  $('.goTo').click(function() {
    carousel.trigger('owl.goTo', owl.currentItem + 5)
  });

但猫头鹰旋转木马如何做到这一点是它滚动所有其他项目去目标。例如，如果我当前的项目是2，如果我跳转然后转到7，则滚动浏览3,4,5和6项。

我更期待的是修改代码，使其不会滚动浏览所有项目，只显示下一项。

我猜猫头鹰旋转木马不提供开箱即用的选项。但如果它确实那么请告诉我，这将是伟大的。

所以，如果过去有人做过这样的任务，请帮忙。

注意：我知道淡入淡出效果会显示直接过渡但我正在寻找的是滚动过渡。

此外，如果有一个替代猫头鹰旋转木马提供开箱即用的功能，那么很高兴知道。

Answer 1

为了直接滚动/滑动到所需页面，请在OwlSlider 2选项中定义这些动画类型。

animateOut: 'fadeOutLeft',
animateIn: 'fadeInRight'

您还需要集成https://daneden.github.io/animate.css/或直接添加以下CSS规则：

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

猫头鹰旋转木马跳转到没有滚动的特定项目

1 个答案: