Как скрестить плагины OWL Carousel и AOS?

Question

[denism300]

Для слайдера я использую плагин OWL Carousel, для анимации AOS. Как сделать, чтобы при смене слайда внутри него запускалась анимация?
Пробовал так:

$('.slider-items--slides').owlCarousel({
        items: 1,
        margin: 0,
        loop: true,
        stagePadding: 0,
        dots: true,
        dotsContainer: '.slider-items--dots',
        smartSpeed: 450,
        animateOut: 'fadeOut',
    });

    $('.slider-items--slides').on('changed.owl.carousel', function (event) {
        var currentItem = event.item.index;
        $('.slider-items--slides .owl-item .slide-item').hide();

        $('.slider-items--slides .owl-item').eq(currentItem).find('[data-aos]').each(function () {
            $(this).removeAttr('data-aos');
            $(this).removeClass('aos-init');
        });

        setTimeout(function () {
            $('.slider-items--slides .owl-item').eq(currentItem).find('.slide-item').fadeIn();
            AOS.refresh();
        }, 1000);

    });

но не работает

Answer 1

[Илья М]

Первый вариант сделать без доп библиотек. Попробуйте использовать стандартный css3.
https://owlcarousel2.github.io/OwlCarousel2/demos/...
Второй вариант, подключить либу, которую они предлагают:
https://animate.style/
Там просто поменять значение:
animateOut: 'fadeOut'
на другое значение из либы.

У меня вот так работает:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
}).on('changed.owl.carousel', function (event) {
  var currentItem = event.item.index;
        setTimeout(function () {
            $('.owl-carousel .item').eq(currentItem).css("background-color", "yellow");
        }, 1000);
});

<div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>