Настройка анимации (animateOut: animateIn:) при нажатии кнопок Owl Carousel 2

Всем хай:) Сегодня решил попробовать Owl Carousel. Он мне приглянулся из-за того, что при перелистывании слайдеров, можно подключать свою анимацию. Но возникли проблемы динамического изменения анимации при клике на стрелки (т.е. динамического изменения: animateOut: animateIn:).

Ну как обычно подключил jQuery и Сarousel.min.js:

 <!--Подключение jQuery для работы плагинов-->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="./scripts/owl.carousel.min.js"></script>

И подключил стили Owl Carousel:

 <link rel="stylesheet" href="./css/owl.theme.default.min.css">
 <link rel="stylesheet" href="./css/owl.carousel.min.css">

Так же подключил Animate.css для дальнейшей анимации слайдов:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Ну т.е. я все подключил и мой HTML для слайдера выглядит так:

<div class="owl-carousel">
     <video class="video__item" preload="auto" autoplay="true" loop="true" muted="muted">
        <source src="./image/Puppies.mp4" type='video/mp4'/>
     </video> 
     <video class="video__item" preload="auto" autoplay="true" loop="true" muted="muted">
        <source src="./image/Flowers.mp4" type='video/mp4'/>
     </video> 
</div>

Так же установил стрелки для пролистывания слайдеров (они инициализируются в скрипте):

<div class="arrow__left">
     <img class="left" src="./image/arrow.png" alt="">
</div>
<div class="arrow__right">
     <img class="right" src="./image/arrow.png" alt="">
</div>

Инициализация слайдера:

<script>
  $(document).ready(function(){
     //Первичная инициализация анимации
     var nextAnimaton = 'animate__fadeOut';
     var prevAnimation = 'animate__fadeInLeftBig';

     var owl = $('.owl-carousel');

     owl.owlCarousel({
        //Один отображаемый элемент
        items: 1,
        //Включение зацикливания
        loop: true,
        //Отключение передвижения мышью
        mouseDrag: false,
        //Отключение точек
        dots: false,
        smartSpeed: 1000,
        animateOut: prevAnimation,
        animateIn: nextAnimaton
     });

     //Перелистывание при клике на правую стрелку
     $('.arrow__right').click(function() {
        nextAnimaton = 'animate__fadeOut';
        prevAnimation = 'animate__fadeInRightBig';
        owl.trigger('next.owl.carousel');
     });

     //Перелистывание при клике на левую стрелку
     $('.arrow__left').click(function() {
        nextAnimaton = 'animate__fadeOut';
        prevAnimation = 'animate__fadeInLeftBig';
        owl.trigger('prev.owl.carousel');
     })
  });

Как заметили, я все классы анимаций вытащил в переменные nextAnimaton и prevAnimation и при клике на стрелки изменял их, в надежде, что это хоть как то повлияет на поведение анимации и изменит ее. Но как и стоило ожидать, ничего не изменилось. Может кто знает, как динамически можно менять классы анимаций (animateOut: animateIn:) внутри owl.owlCarousel({}) ?)

Чуть погодя изменил, но все равно безуспешно:

$(document).ready(function(){
     //Первичная инициализация анимации
     var nextAnimaton = '';
     var prevAnimation = '';

     var owl = $('.owl-carousel');

     owl.owlCarousel({
        //Один отображаемый элемент
        items: 1,
        //Включение зацикливания
        loop: true,
        //Отключение передвижения мышью
        mouseDrag: false,
        //Отключение точек
        dots: false,
        smartSpeed: 1000,
        //animateIn: nextAnimaton,
        //animateOut: prevAnimation,
     });

     //Перелистывание при клике на правую стрелку
     $('.arrow__right').click(function() {
        nextAnimaton = 'animate__fadeInRightBig';
        prevAnimation = 'animate__fadeOut';
        console.log(owl.data('owl.carousel').settings);
        owl.data('owl.carousel').settings.animateIn = nextAnimaton ;
        owl.data('owl.carousel').settings.animateOut = prevAnimation;
        owl.trigger('next.owl.carousel');
        console.log(owl.data('owl.carousel').settings);
     });

     //Перелистывание при клике на левую стрелку
     $('.arrow__left').click(function() {
        nextAnimaton = 'animate__fadeInLeftBig';
        prevAnimation = 'animate__fadeOut';
        console.log(owl.data('owl.carousel').settings);
        owl.data('owl.carousel').settings.animateIn = nextAnimaton ;
        owl.data('owl.carousel').settings.animateOut = prevAnimation;
        owl.trigger('prev.owl.carousel');
     })
  });