单击时使用 animate.css 在 OwlCarousel 中的下一个和上一个按钮上添加动画

Question

我的问题是我想通过单击轮播的next 和previous 按钮来为幻灯片制作动画，但是下一个和上一个的动画都会发生变化。

这是我的 HTML 代码：

<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>

我的 JavaScript：

这是我的 JavaScript 脚本，我正在初始化我的 reviews-testimonial。我还添加了按钮 next 和 prev 自定义我想要放置动画的位置。

$('.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

每次单击下一个或上一个按钮时，您都会重新初始化轮播，而您不必这样做。全局初始化您的滑块，并在点击处理程序中使用owl 变量来触发动画。

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');
});