2

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

小提琴

我owl.goTo用来直接跳转到一个项目。

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

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

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

我猜 owl carousel 没有开箱即用地提供这个选项。但如果确实如此，请告诉我，它会很棒。

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

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

此外，如果有一个猫头鹰轮播的替代品可以提供这种开箱即用的功能，那么很高兴知道。

4

1 回答 1

-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;
}
于 2018-08-23T05:09:49.007 回答