Owl carousel 2 animate 在 chrome 最新版本 (V52) 中不起作用

Posted

技术标签:

【中文标题】Owl carousel 2 animate 在 chrome 最新版本 (V52) 中不起作用【英文标题】:Owl carousel 2 animate not working in chrome latest version (V52) 【发布时间】:2017-01-03 01:43:00 【问题描述】:

我正在使用带有 animate.css 的 owl carousel 版本 2.0.0 来实现淡入和淡出效果,但它不适用于 chrome 最新版本 52.0.2743.116

下面是我用于淡化项目的脚本。

$('.owl-carousel').owlCarousel(    
    //loop:true,
    margin:10,
    nav:true,
    items:1,    
    animateIn: 'fadeIn',
    animateOut: 'fadeOut',
    mouseDrag: false,
   touchDrag: false,
    responsive:
        0:
            items:1
        ,
        600:
            items:1
        ,
        1000:
            items:1
        
    
)

任何帮助将不胜感激。

【问题讨论】:

【参考方案1】:

为此,您需要在 css 下方添加。

.owl-carousel .owl-wrapper-outer
       overflow: hidden;
       position: relative;
       width: 100%;
       z-index: 1;  // added this

.owl-item  
     transform: translateZ(0);
     -webkit-transform: translateZ(0); 
     -ms-transform: translateZ(0);
 

它对我有用。

【讨论】:

以上是关于Owl carousel 2 animate 在 chrome 最新版本 (V52) 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

owl-carousel 无法阻止默认

Vue Owl Carousel 在容器外渲染数据

调整owl-carousel的高度

有没有办法改变owl-carousel的光标? (不是 owl-dots 或 owl-nav)

无法在页面上使用超过两个 owl carousel 2 缩略图

如何使用 mouseenter 自动播放 Owl carousel 2 滑块?