jquery - Owl Carousel 跳转到没有滚动的特定项目

Question

我有一个 Owl Carousel 设置。我试图跳到特定项目的地方。这是一个 fiddle 。

FIDDLE

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

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

但是 Owl Carousel 是如何做到这一点的，它会滚动所有其他项目以到达目标。例如，如果我当前的项目是 2，并且如果我跳转到 7，它会滚动到第 3、4、5 和第 6 个项目。

我更期望的是修改代码，以便它不会滚动所有项目，而只显示下一个项目。

我猜 Owl Carousel 不提供开箱即用的此选项。但如果确实如此，请告诉我，那就太好了。

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

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

此外，如果有一个 Owl Carousel 的替代品可以提供开箱即用的此类功能，那么很高兴知道。

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