0

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');
});
David Buck
  • 3,752
  • 35
  • 31
  • 35
Asad Shiekh
  • 31
  • 12
  • Does this answer your question? [How to use owl carousel vertically?](https://stackoverflow.com/questions/25079495/how-to-use-owl-carousel-vertically) – Emiel Zuurbier Mar 03 '20 at 12:46

1 Answers1

0

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');
});
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • can you plz give me some example – Asad Shiekh Mar 03 '20 at 11:54
  • regrading how can i animate in next and prev button – Asad Shiekh Mar 03 '20 at 11:55
  • Could you first explain **what** animation you are trying to do? In the code in your question you have the `animateIn` and `animateOut` properties commented out. Were they not working? – Emiel Zuurbier Mar 03 '20 at 12:10
  • well those are working properly but they will act the same in both ways . – Asad Shiekh Mar 03 '20 at 12:31
  • i want to change the effect in next and prev. like when i click next button it will down and when i will click prev btn it will push the slide up – Asad Shiekh Mar 03 '20 at 12:32
  • It seems that Owl Carousel does not support vertical sliding according to [this SO post](https://stackoverflow.com/questions/25079495/how-to-use-owl-carousel-vertically). I'd suggest a different slider, like [Slick Slider](https://kenwheeler.github.io/slick/) which does support it. – Emiel Zuurbier Mar 03 '20 at 12:47