@Demon101k

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

Не получается настроить анимацию текста на слайдере
Слайдер 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');
          }
        }
      );
  • Вопрос задан
  • 2841 просмотр
Решения вопроса 1
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
1) если по умному делать - удаляй классы у всех других. а присваивай только нужному через this
2) а если через костыль, то так:
$('.top-carousel').on('changed.owl.carousel', function(event) {
    $('.slide-title').addClass('animated fadeInDown');
    setTimeout(function() { $('.slide-title').addClass('animated fadeInDown'); }, 0);
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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  ;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы