jquery - owlCarousel 在 Prev 和 Next 上用动画反转幻灯片移动方向

Question

owlCarousel 的默认行为工作正常，单击 Next 向右滑动，然后单击 Prev 将幻灯片向左滑动。

但是在使用动画后两者总是朝着同一个方向。

这是一个快速的 jsfiddle 来显示问题:

JSFiddle owl animation sample

所以在 fiddle 中， slider 应该在 Next 上向上移动，在 Prev 上向下移动，但它总是向上移动。我尝试了 Animate.css 中的所有类型的动画选项。

我还尝试使用 JQuery 和 Owl Carousel 触发器来覆盖单击下一个或上一个时的动画，但效果不佳。

$(".news-slider .owl-nav .owl-next").click(function(e){

    var carousel = caseStudeisContent.data('owl.carousel');
    animateIn = "slideInLeft";
    animateOut = "slideOutRight";

    carousel.settings.animateOut = animateOut;
    carousel.settings.animateOut = animateOut;
    carousel.options.animateIn = animateIn;
    carousel.options.animateIn = animateIn;

    caseStudeisContent.trigger('refresh.owl.carousel');
    console.log("next");
    caseStudeisContent.trigger("next.owl.carousel");
});

$(".news-slider .owl-nav .owl-prev").click(function(e){

    var carousel = caseStudeisContent.data('owl.carousel');
    animateIn = "slideLeft";
    animateOut = "slideInRight";

    carousel.settings.animateOut = animateOut;
    carousel.settings.animateOut = animateOut;
    carousel.options.animateIn = animateIn;
    carousel.options.animateIn = animateIn;

    caseStudeisContent.trigger('refresh.owl.carousel');
    console.log("prev");
    caseStudeisContent.trigger("prev.owl.carousel");
})

Answer 1

使用 Owl Carousel 似乎无法做到这一点。请记住，此库有其局限性。
在这种情况下，一种修复方法是使用 transform 属性。

首先，删除 animateOut: 'fadeOutUp' 和 animateIn: 'fadeInUp'。它将变成一个“正常” slider 。然后，添加旋转 .owl-carousel 和 .owl-item 的转换属性:

owl-carousel {
  transform: rotate(90deg);
}
.owl-carousel .owl-item {
  transform: rotate(-90deg) translate(25px); // also move it a little bit
}