Owl Carousel 2 无法制作淡入淡出动画

Question

这里是 Owl 轮播 2 淡入淡出动画的示例：http://www.owlcarousel.owlgraphic.com/demos/animate.html

我想我已经包含了所有必需的 css 和 js 文件，这是我的代码：

/* ==============================================
    OWL CAROUSEL
=============================================== */
var $slides_nav = ( $('#slides').attr('data-direction') == 1 ) ? true : false;
var $slides_speed = $('#slides').attr('data-speed');

$("#slides ul").owlCarousel({
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    nav: $slides_nav,
    animateOut: 'fadeOut',
    items:1,
    margin:0,
    loop:true,
    autoplay:true,
    autoplayTimeout:8000,
    autoplayHoverPause:false,
    dots: false,
    stagePadding:0,
    smartSpeed:1000,

});

滑块有效，但幻灯片切换不褪色..

你可以在我的website中看到

Answer 1

我找到问题了。我把它放在我的 css 中，对于页面中的其他动画是必需的：

.animated {
    visibility:hidden;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
}

这是导致问题的原因。我添加了下面的代码，现在可以使用了。

.owl-item.animated {
    visibility: visible;
}

Owl Carousel 2 无法制作淡入淡出动画

Owl Carousel 2 can't make fade animation work

javascript

css

jquery

owl-carousel