CODEWITHSUNDEEP
javascriptjquerycssanimate.css
user3691504
user3691504

Reputation: 21

Adding animate css to a flexslider caption

My knowledge of jquery is quite limited but basically when the class=flex-active-slide is added to the slide I wish to add class=animate fadeInUp to class="caption-inner"

$(document).ready(function(){
   $('.flex-active-slide .caption-inner').addClass('animate fadeInUp');});

end goal to make the animate css activate every time the slider changes

Upvotes: 1

Views: 4623

Answers (4)

Muslim
Muslim

Reputation: 11

Include animate.css and add the following style for flexslider's active-slide:

.flex-active-slide .flex-caption{
    animation-name:slideInUp; 
    animation-duration:1s;
    animation-fill-mode:both
}

Upvotes: 1

John V
John V

Reputation: 31

Just add this to your CSS

.flexslider .flex-active-slide .animation.animated-item-1 {
-webkit-animation: fadeInDown 1500ms linear 1500ms both;
-moz-animation: fadeInDown 1500ms linear 1500ms both;
-o-animation: fadeInDown 1500ms linear 1500ms both;
-ms-animation: fadeInDown 1500ms linear 1500ms both;
animation: fadeInDown 1500ms linear 1500ms both;
}

You can of course make more variations. Give enough time for Flexslider to load the images first, hence the 1500ms.

In the HTML you add to the element (h1 or p)

class="animation animated-item-1"

And that's it! Enjoy, John

Upvotes: 1

femotizo
femotizo

Reputation: 1405

i was able to get mine to work using the below code

$('.flexslider').flexslider({
    animation: "fade",
    before: function(slider){
      $(slider).find(".flex-active-slide").find('.caption-inner').each(function(){
       $(this).removeClass("animated fadeInUp");
       });
     },
    after: function(slider){
          $(slider).find(".flex-active-slide").find('.caption-inner').addClass("animated fadeInUp");
      },

});

this should get you going

Upvotes: 3

André Dion
André Dion

Reputation: 21708

When you instantiate your slider, use the after callback to apply your class:

$('.slider').flexslider({
    after: function(slider) {
        slider.slides.eq(slider.currentItem).find('.caption-inner').addClass('animate fadeInUp');
    }
});

Upvotes: 0

Related Questions