Добавьте анимацию на следующую и предыдущую кнопку в OwlCarousel, используя animate. css при нажатии - PullRequest
Новая
       8

Добавьте анимацию на следующую и предыдущую кнопку в OwlCarousel, используя animate. css при нажатии

0 голосов
/ 03 марта 2020

Моя проблема заключается в том, что я хочу анимировать свой слайд, нажимая кнопки next и previous на карусели, но анимация будет меняться как в следующем, так и в предыдущем.

Это мой 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:

Это мой 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');
});

1 Ответ

0 голосов
/ 03 марта 2020

Каждый раз, когда вы нажимаете кнопку «Далее» или «Предыдущая», вы заново инициализируете свою карусель, что вам не нужно. Инициализируйте ползунок глобально и в обработчиках кликов используйте переменную 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');
});
...