Owl-使用animate.css插件从左到右旋转木马

Question

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

现在我的问题是 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。

如果您需要真正的 'right to left' 支持，请在 Owl 轮播设置中将 rtl 设置为 true。请参阅此 demo 了解其工作原理。

Owl-使用animate.css插件从左到右旋转木马

Owl-carousel slide from left to right using animate.css plugin

html

javascript

css

jquery

owl-carousel