How to animate text on owl-carousel slider?

Question

JavaScript

I can’t set up text animation on the slider
Owl carousel slider, connected animate.css
I want the text on it to animate when the slide changes too, but this only happens on the first page load, then nothing happens when changing slides
Here is the code:

$('.top-carousel').owlCarousel(
        {
          items: 1,
          autoplay: true,
          loop: true,
          nav: true,
          navText: false,
          dots: true,
//          animateOut: 'bounceOutLeft',
//					animateIn: 'bounceInLeft',
          smartSpeed:450,
          beforeMove: function(){
            $('.slide-title').removeClass('animated fadeInDown');

          },
                  afterMove: function(){
            $('.slide-title').addClass('animated fadeInDown');
          }
        }
      );

Answer 1

1) if you do it smartly - delete classes from all others. and assign only to the necessary one through this
2) and if through a crutch, then like this:

$('.top-carousel').on('changed.owl.carousel', function(event) {
    $('.slide-title').addClass('animated fadeInDown');
    setTimeout(function() { $('.slide-title').addClass('animated fadeInDown'); }, 0);
})

Answer 2

After a few eternities, the following option worked

$(document).ready(function (){
  // Declare Carousel jquery object
  var owl = $('.owl-carousel');

  // Carousel initialization
    owl.owlCarousel({
    items:1,
    margin:10,
    autoHeight:true,
    autoplay: true,
    autoplayHoverPause:true,
    dots:true,
    loop:true,
    pagination:false,
    navigation:true
  });


  // add animate.css class(es) to the elements to be animated
  function setAnimation ( _elem, _InOut ) {
    // Store all animationend event name in a string.
    // cf animate.css documentation
    var animationEndEvent = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

    _elem.each ( function () {
      var $elem = $(this);
      var $animationType = 'animated ' + $elem.data( 'animation-' + _InOut );

      $elem.addClass($animationType).one(animationEndEvent, function () {
        $elem.removeClass($animationType); // remove animate.css Class at the end of the animations
      });
    });
  }

// Fired before current slide change
  owl.on('change.owl.carousel', function(event) {
      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-out]");
      setAnimation ($elemsToanim, 'out');
  });

// Fired after current slide has been changed
  owl.on('changed.owl.carousel', function(event) {

      var $currentItem = $('.owl-item', owl).eq(event.item.index);
      var $elemsToanim = $currentItem.find("[data-animation-in]");
      setAnimation ($elemsToanim, 'in');
  })

});

Slider HTML:

<div class="owl-carousel">
  <div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/1-1.jpg" alt="" width="848" height="370" />
    <div class="item12">
      <div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
        Двери серии Trend                            
      </div>
      <div class="excerpt" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" hidden-xs" style="top:-15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
      <div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
        </div>
    </div>
    <div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
        <div class="item12">
      <div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
        Двери серии Trend                            
      </div>
      <div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
      <div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
    </div>
  </div>
  <div><img src="http://xn--e1afpni.xn--80adxhks/wp-content/uploads/2014/12/ded96eb521aaf1cea928cc95dc05d996.jpg" alt="" width="848" height="370" />
    <div class="item12">
      <div class="big-text" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" max-width: 500px; min-width: 450px; top: -15px;">
        Двери серии Trend                            
      </div>
      <div class="excerpt hidden-xs" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style=" top: -15px;"><span style="font-size: 18px;">Новый Тренд в Эко Шпоне</span></div>
      <div class="button-holder" data-animation-in="fadeInUp" data-animation-out="animate-out fadeOutDown" style="top: -15px;"><a href="discounts/" class="btn-lg btn btn-uppercase btn-primary shop-now-button">Подробнее</a></div>
    </div>
  </div>
</div>

CSS:

.item12 {
    color: #fff;
    position: absolute;
    top: 24%;
    z-index: 250;
    padding-left: 8%;
  
}
.item12 .excerpt, .item12 .small {
    font-size: 17px;
    line-height: 30px;
    margin-top: 10px;
   margin-bottom: 20px;
    font-family: 'Roboto';
    font-weight: 500;
    background: rgba(0, 0, 0, 0);
    color: #fff;
    text-transform: uppercase;
    text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
}
.item12 .big-text {
    font-size: 35px;
    line-height: 50px;
    text-transform: uppercase;
   text-shadow: 1px 2px 2px rgba(0,0,0,0.9);
 
    color: #fff;
}
.animated  {
  -webkit-animation-duration : 3s  ;
  animation-duration : 3s  ;

  -webkit-animation-delay : 500ms  ;
  animation-delay : 500ms  ;
}

.animate-out {
  -webkit-animation-delay : 0ms  ;
  animation-delay : 0ms  ;
}