Как сдклать анимацию текста на слайдере owl-carousel?

Question

[Demon101k]

Не получается настроить анимацию текста на слайдере
Слайдер owl carousel, подключил animate.css
Хочу, чтобы при смене слайда текст на нем тоже анимировался, но это происходит только при первой загрузке страницы, дальше при смене слайдов ничего не происходит
Вот код:

$('.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

[iBird Rose]

1) если по умному делать - удаляй классы у всех других. а присваивай только нужному через this
2) а если через костыль, то так:

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

Comments

[Demon101k]

Пробовал и change и changed, все равно работает только при первой загрузке.

[iBird Rose]

Demon101k: кароч ошибка в удалении и присваивании класса. нельзя в одном и том же месте удалять их и присваивать. бери индексы активных слайдов и через this для .slide-title присваивай класс. а не всем

[iBird Rose]

Demon101k: обновил ответ.

[Demon101k]

Спасибо большое, работает! А я всю голову сломал пока искал в чем ошибка)

Answer 2

[sentimento]

После нескольких вечностей, сработал следующий вариант

$(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');
  })

});

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

Comments

[sentimento]

Если хотите индивидуальную задержку - делаем еще один стиль с другой задержкой

.animated2  {
  -webkit-animation-duration : 3s  ;
  animation-duration : 3s  ;

  -webkit-animation-delay : 1200ms  ;
  animation-delay : 1200ms  ;

и прописываем в
data-animation-in="animated2 fadeInUp"

Совершенно не считаю себя знатоком - потому не знаю, костыль это или по умному)) подскажите