I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css.
While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `animateOut`. It is not behaving as per my requirements.
I want my image to slide in the opposite direction compared to what it currently does. Here is an example of how I want it to be: https://www.w3schools.com/booTsTrap/tryit.asp?filename=trybs_carousel2&stacked=h
Note: The current sliding direction is right to left, but I need it to slide from left to right.
Can someone please assist me with resolving this issue?
$('#GallerySlider').owlCarousel({
dots: false,
loop: true,
margin: 10,
nav: true,
autoplay: true,
animateIn: 'slideInLeft',
animateOut: 'slideInLeft',
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<section>
<div class="Gallery">
<div class="owl-carousel owl-theme" id="GallerySlider">
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlkGqPJPf0tsgfoEVS32fPXDJRQ2mxk5ioOnFhrgDsCKnSpPve"></div>
<div class="item"><img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></div>
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvmsPDO1qCfjUNpAKgj5uBfuuDohdAMa1BTIeHGn-FmN6A3lOu"></div>
</div>;
</div>;
</section>;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>;
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>;