Question

以下是Owl Carousel 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无法制作淡入淡出的动画作品

1 个答案: