Проблемы с анимацией слайдера или текста заголовка в Owl Carousel - PullRequest
Новая
       17

Проблемы с анимацией слайдера или текста заголовка в Owl Carousel

0 голосов
/ 26 марта 2019

Я нашел пример кода и мне удалось добавить индикатор выполнения на мой слайдер OWL Carousel 2.

Индикатор выполнения в порядке, но у меня возникают проблемы, когда я пытаюсь анимировать элемент слайдера или когда я пытаюсь добавить анимацию в текст заголовка. 

<div id="demo" class="container">
    <div id="owl-demo" class="owl-demo">
        <div class="slide-progress"></div>
            <div class="owl-carousel owl-theme">
                    <div class="item"><img src="https://via.placeholder.com/1920x600.png" alt="" />
                    <div class="caption">
                        <span class="animated bounce">First Caption</span>
                    </div>
                </div>
            </div>
    </div>
</div>

initSlider();

function initSlider() {
  jQuery(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    animateOut: "slideOutDown",
    animateIn: "flipInX",
    smartSpeed:450,
    onInitialized: startProgressBar,
    onTranslate: resetProgressBar,
    onTranslated: startProgressBar
  });
}
var owl = jQuery('.owl-carousel');
  owl.on('changed.owl.carousel', function(event) {
      var item = event.item.index - 2;     // Position of the current item
      jQuery('span').removeClass('animated bounce');
 jQuery('.owl-item').not('.cloned').eq(item).find('span').addClass('animated bounce');
  });


function startProgressBar() {
  // apply keyframe animation
  jQuery(".slide-progress").css({
    width: "100%",
    transition: "width 9000ms"
  });
}

function resetProgressBar() {
  jQuery(".slide-progress").css({
    width: 0,
    transition: "width 0s"
  });
}

Вопрос 1. Как добавить анимацию для ".item"?

Вопрос 2. Как добавить анимацию для подписи?

Спасибо

...