Ad

Owl-carousel Slide From Left To Right Using Animate.css Plugin

I am using a slider plugin called Owl Carousel 2.

I am using Animate.css as well.

Now my issue is that animateIn: 'slideInLeft' is working but animateOut is not working according to my need.

I need to slide my image like this :

https://www.w3schools.com/booTsTrap/tryit.asp?filename=trybs_carousel2&stacked=h

Note : it's sliding from right to left but I need it to slide the opposite way (from left to right).

Would you kindly help me out with 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" target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" 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>

Ad

Answer

Simply set animateIn to slideInRight and animateOut to slideOutLeft.

The incoming slide will slide from the right to the left and the outgoing one will slide out from the right to the left.

If you want the opposite effect, set animateIn to slideInLeft and set animateOut to slideOutRight.

If you need true 'right to left' support, set rtl to true in your Owl Carousel settings. See this demo to see how it works.

Ad
source: stackoverflow.com
Ad