Add animation on next and previous button in OwlCarousel using animate.css on clicking

Question

My problem is that I want to animate my slide by clicking on the next and previous button of the carousel, but animation will change in both next and previous.

This is my HTML code:

<div class="col-12 col-lg-5 text-center review-box">
    <div class="row no-gutters reviews-testimonial owl-carousel owl-theme">
        <div class="reviews item">
            <div class="review-body">
                <p class="user-comment">Click edit button to change this text. Lorem dolor sit amet, sit consectetur elit. amet, for adipiscing elit. amet, consect adipiscing elit.</p>
                <p class="comment-date">19-dec-2020</p>
                <ul class="review-stars">
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                </ul>
            </div>
            <div class="user-img"><img src="innovative/img/review.jpg" class="rounded-circle"></div>
            <h4 class="user-name">Mickal Devid</h4>
            <p class="user-designation">- Web Designer -</p>
        </div>
        <div class="reviews item">
            <div class="review-body">
                <p class="user-comment">Edit button to change this text. Lorem dolor sit amet, sit consectetur elit. amet, for adipiscing elit. amet, consect adipiscing elit.</p>
                <p class="comment-date">19-dec-2020</p>
                <ul class="review-stars">
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                    <li><a href="#"><i class="las la-star"></i></a></li>
                </ul>
            </div>
            <div class="user-img"><img src="innovative/img/rev.jpg" class="rounded-circle"></div>
            <h4 class="user-name">Mickal Devid</h4>
            <p class="user-designation">- Web Designer -</p>
        </div>
    </div>
    <a class="navigate-btn prev-review-btn"><span class="fly-line"></span>Prev <i class="las la-arrow-right"></i> </a>
    <a class="navigate-btn next-review-btn"><span class="fly-line"></span>Next <i class="las la-arrow-right"></i></a>
</div>

My JavaScript:

This is my JavaScript script I am initializing my reviews-testimonial. I also add buttons next and prev custom where I want to put my animation.

$('.reviews-testimonial').owlCarousel({

    loop: true,
    margin: 20,
    slideSpeed: 5000,
    slideTransition: 'fade',
    //animateOut:'slideOutDown',
    //animateIn:'slideInDown',
    nav: false,
    dots: false,
    responsive: {
        0: {
            autoplay: true,
            autoplayTimeout: 8000,
            autoplayHoverPause: true,
            items: 1
        },
        600: {
            items: 1
        },
        1000: {
            items: 1
        },
    }

});
$('.next-review-btn').click(function () {
    var owl = $('.reviews-testimonial');
    owl.owlCarousel();
    // slider animation
    owl.trigger('next.owl.carousel');
});

$('.prev-review-btn').click(function () {
    var owl = $('.reviews-testimonial');
    owl.owlCarousel();
    // slider animation
    owl.trigger('prev.owl.carousel');
});

Answer 1

Every time you click the next or prev button you re-initialize your carousel, which you don't have to. Initialize your slider globally and in the click handlers use the owl variable to trigger the animations.

var owl = $('.reviews-testimonial');
owl.owlCarousel();

$('.next-review-btn').click(function() {
  // slider animation
  owl.trigger('next.owl.carousel');
});

$('.prev-review-btn').click(function() {
  // slider animation
  owl.trigger('prev.owl.carousel');
});