Анимировать CSS на owl.carousel.change - PullRequest
Новая
       11

Анимировать CSS на owl.carousel.change

1 голос
/ 13 апреля 2019

Я использую эту сову-карусель и добавляю animate.css для некоторого текста в этом слайдере. Теперь анимация хорошо работает на старте, и все. Мне нужно какое-то решение, как сделать в js для .addClass и .removeClass на owl.carousel.change. Я что-то пробовал, но не сработало. 

 <div id="BG" class="owl-carousel owl-theme">
     <div class="bg-item1">
        <div class="container row h-100">
            <div class="col-sm-12 align-self-center">
                <div class="bg-txt animated fadeInRight delay-2s">
                    <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>                                          
                </div>
             </div>
        </div>
     </div>
     <div class="bg-item2">
         <div class="container row h-100">
             <div class="col-sm-12 align-self-center">
                  <div class="bg-txt animated fadeInRight delay-2s ">
                     <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span       
                   </div>
              </div>
          </div>
      </div>
</div>

1 Ответ

1 голос
/ 13 апреля 2019

Библиотека Сова Карусель 2 поддерживает анимированные переходы слайдов .Вы можете передать анимированные классы, которые хотели бы добавить в свойства animateIn и animateOut.Смотрите приведенный ниже фрагмент рабочего примера с использованием animateIn: 

$(document).ready(function() {
  var owl = $('.owl-carousel');

  owl.owlCarousel({
    animateIn: 'fadeInRight delay-2s',
    items: 1,
    loop: true,
    nav: true,
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>

Если вам нужно анимировать отдельные элементы на слайде при смене слайдов, вы можете использовать событие translate.owl.carousel ( НЕ change.owl.carousel, поскольку он не работает должным образом для этой цели).Посмотрите следующий фрагмент для примера этого: 

$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    items: 1,
    loop: true,
    nav: true,
  });

  $('.owl-carousel').on('translate.owl.carousel', function(e) {
    var index = e.item.index;
    $('.bg-txt').removeClass('animated fadeInRight delay-2s');
    $('.bg-txt').eq(index).addClass('animated fadeInRight delay-2s');
  });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div id="BG" class="owl-carousel owl-theme">
  <div class="bg-item1">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt animated fadeInRight delay-2s">
          <span style="text-transform: uppercase; font-weight:bold;"> SOME TEXT </span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-item2">
    <div class="container row h-100">
      <div class="col-sm-12 align-self-center">
        <div class="bg-txt">
          <span style="text-transform: uppercase; font-weight: bold;"> SOME TEXT </span> </div>
      </div>
    </div>
  </div>
</div>
...