使用Owl Carousel和Wow.js

时间:2015-03-15 04:14:55

标签: javascript jquery css-animations owl-carousel wow.js

Owl Carousel:http://www.owlcarousel.owlgraphic.com/ 哇:js:http://mynameismatthieu.com/WOW/

我正在使用Owl Carousel和Wow.js

我正在尝试创建幻灯片,幻灯片处于活动状态时,每张幻灯片的内容都会动画显示。目前,即使其中包含的幻灯片在屏幕外,也会出现所有内容的动画。 Wow.js似乎只能识别幻灯片本身是可见的并激活所有动画

有没有办法可以更改它,以便只有当屏幕上显示包含幻灯片时才会在内容上播放动画?

1 个答案:

答案 0 :(得分:0)

mwdigian是正确的  我有同样的问题  接下来,我做了

<script> 
   var $owl = $('.test-carousel'); 
   $owl.owlCarousel(); 

   //here we need hide because method show() doesn't work with css visible
   $( ".active .item h2" ).hide();

   //all other is the same
   $owl.on('translated.owl.carousel',
      function( event ) { 
      $( ".active .item h2" ).addClass( "animated bounceInDown" ); 
      $(".active .item h2").show(); });
   </script>