Owl-carousel 使用 animate.css 插件从左向右滑动

Question

我正在使用一个名为 Owl Carousel 2 的滑块插件。

我也在使用Animate.css。

现在我的问题是 animateIn: 'slideInLeft' 正在工作，但 animateOut 没有根据我的需要工作。

我需要像这样滑动图片：

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

注意：它是从右向左滑动，但我需要它反向滑动（从左向右）。

你能帮我解决这个问题吗？

$('#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>

Answer 1

只需将animateIn 设置为slideInRight 并将animateOut 设置为slideOutLeft。

传入的幻灯片将从右向左滑动，传出的幻灯片将从右向左滑动。

如果你想要相反的效果，将animateIn设置为slideInLeft，将animateOut设置为slideOutRight。

如果您需要真正的“从右到左”支持，请在您的 Owl Carousel 设置中将 rtl 设置为 true。请参阅此 demo 以了解其工作原理。