The default functionality of owlCarousel is to move to the right when clicking Next and to the left when clicking Prev. However, after applying animations, both directions always move in the same direction.
Check out this sample on jsfiddle to see the issue: JSFiddle owl animation sample
In the provided fiddle, the slider should slide up when clicking Next and down when clicking Prev, but it only moves up. I have experimented with various animation options from Animate.css without success.
I also attempted to use JQuery and owl carousel triggers to modify the animation when clicking next or prev, but that did not resolve the issue either.
$(".news-slider .owl-nav .owl-next").click(function(e){
var carousel = caseStudeisContent.data('owl.carousel');
animateIn = "slideInLeft";
animateOut = "slideOutRight";
carousel.settings.animateOut = animateOut;
carousel.settings.animateOut = animateOut;
carousel.options.animateIn = animateIn;
carousel.options.animateIn = animateIn;
caseStudeisContent.trigger('refresh.owl.carousel');
console.log("next");
caseStudeisContent.trigger("next.owl.carousel");
});
$(".news-slider .owl-nav .owl-prev").click(function(e){
var carousel = caseStudeisContent.data('owl.carousel');
animateIn = "slideLeft";
animateOut = "slideInRight";
carousel.settings.animateOut = animateOut;
carousel.settings.animateOut = animateOut;
carousel.options.animateIn = animateIn;
carousel.options.animateIn = animateIn;
caseStudeisContent.trigger('refresh.owl.carousel');
console.log("prev");
caseStudeisContent.trigger("prev.owl.carousel");
})