Сова-карусель скользит слева направо с помощью плагина animate.css - PullRequest
Новая
       11

Сова-карусель скользит слева направо с помощью плагина animate.css

0 голосов
/ 18 марта 2019

Я использую плагин-слайдер под названием 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>

1 Ответ

0 голосов
/ 18 марта 2019

Просто установите animateIn на slideInRight и animateOut на slideOutLeft.

Входящий слайд будет скользить справа налево, а исходящий - справа налево.

Если вы хотите противоположный эффект, установите animateIn на slideInLeft и установите animateOut на slideOutRight.

Если вам нужна истинная поддержка «справа налево», установите rtl в true в настройках «Карусель совы». Посмотрите демо , чтобы увидеть, как это работает.

...