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。

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

使用animate.css插件从左向右滑动猫头鹰轮播

1 个答案: