Using Owl Carousel and Wow.js

Question

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

I am using Owl Carousel and Wow.js

I am trying to create a slideshow where the contents of each slide animates when the slide is active. Currently, the animations for all content occurs even if the slide it is contained within is offscreen. Wow.js only seems to be able to recognize is the slideshow itself is visible and actives all animations

Is there a way I can change it so the animation occurs on the content only when its containing slide is visible on the screen?

I can get pretty close to what I want by making the content visible and adding a class but I'm not sure if this is the correct method. Also, this means that the initial slide won't have the content visible (as in the CSS it's hidden) `` — mwdigian, Mar 16 '15 at 00:56

score 0 · Answer 1 · answered Aug 06 '18 at 08:25

mwdigian is right I have same problem I did next:

<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>

Using Owl Carousel and Wow.js

1 Answers1