CODEWITHSUNDEEP
owl-carouselanimate.css
Masfi
Masfi

Reputation: 11

owl-carousel caption animated

I want to animate div.caption>div with fadeIn effect every time I click on the next button.

I've added wow.js and animate.css to add effects. Now, I want to animate all divs that have .wow class. The problem is that I only see the first effect. The others works fine but I don't see it because the effects starts all at the same time, and I want the effect start in his item.

http://jsfiddle.net/masfi/hpw4tuz7/5/

The code I use:

<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item" >
    <div class="caption">
        <div class="fadeIn wow" data-wow-delay="0.1s">
            <p>111</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.2s">
            <p>222</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="" />
</div> 
<div class="item">
    <div class="caption">
        <div class="fadeInUp wow" data-wow-delay="0.1s">
             <p>111</p>
        </div>
        <div class="fadeInUp wow" data-wow-delay="0.2s">
              <p>222</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.3s">
              <p>333</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="" />
</div>
<div class="item">
    <div class="caption">
        <div class="fadeIn wow" data-wow-delay="0.1s">
            <p>111</p>
        </div>
        <div class="fadeIn wow" data-wow-delay="0.2s">
            <p>222</p>
        </div>
    </div>
    <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt=""/>
</div>
</div>


$(document).ready(function($) {  
var owl = $('#owl-demo');
    owl.owlCarousel({
        items:1,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true
    });
    var wow = new WOW({
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    }
  });
wow.init();
});

Upvotes: 1

Views: 7122

Answers (1)

Matt
Matt

Reputation: 31

You've probably sorted this by now... but if not (and for the sake of others reading this), this worked for me:

$('.owl-carousel').owlCarousel({
    addClassActive: true,
    afterMove: function(){
       var caption = $( ".owl-item.active .caption" ).detach();
       caption.appendTo(".owl-item.active > div");
    }
});

Upvotes: 3

Related Questions