jquery - 使用 owlcarousel2 进行幻灯片放映，为每张幻灯片设置移动

Question

我用 owlcarousel2 库创建了一个幻灯片放映，我想为每张幻灯片设置一个不同的 Action 出现在屏幕上。

例如，现在所有幻灯片都从右到左出现在屏幕上，就像正常的幻灯片放映一样。是否可以为每张幻灯片设置不同的外观移动，比如一些幻灯片从左到右，另一些幻灯片从右到左？

这是我的代码:

<section class="welcome_area" id="home">
    <div class="welcome_slides">
         <div class="single_slide">
            <div class="slide_text">
                <div class="table">
                    <div class="table_cell">
                        <center><img src="img/Oregon_Duck_website.gif" /></center>
                    </div>
                </div>
            </div>               
        </div>

        <!-- Slide -->
        <div class="single_slide">
            <div class="slide_text">
                <div class="table">
                    <div class="table_cell">
                        <center><img src="img/Oregon_Football_1_Black-Gray-Yellow.gif" /></center>
                    </div>
                </div>
            </div>               
        </div>
      </div>
</section>

和 js:

 if ($.fn.owlCarousel) {
    $(".welcome_slides").owlCarousel({
        items: 1,
        margin: 0,
        loop: true,
        nav: true,
        navText: ['<i class="fa fa-chevron-left" aria-hidden="true"></i>', '<i class="fa fa-chevron-right" aria-hidden="true"></i>'],
        dots: false,
        autoplay: true,
        autoplayTimeout: 7000,
        smartSpeed: 500,
        autoplayHoverPause: false
    });
}

Answer 1

您需要做两件主要的事情:

1. 包括 animate.css在您的页面中。

2. 创建自定义函数以从 animate.css 提供的动画数组中进行选择

   function getRandomAnimation() {
       var animationList = ['bounce', 'zoomIn', 'flipInX', 'flash', 'pulse', 'rubberBand', 'jello'];
       return animationList[Math.floor(Math.random() * animationList.length)];
   }
   

一旦你设置好了这两个东西，你只需要初始化猫头鹰轮播并设置animateOut和 animateIn从 getRandomAnimation() 中获取随机值功能。

  var owl = $('.owl-carousel');

  owl.owlCarousel({
    animateOut: getRandomAnimation,
    animateIn: getRandomAnimation,
    items: 1,
    margin: 30,
    stagePadding: 30,
    smartSpeed: 450,
    autoplay: true,
    autoplayTimeout: 2000
  });

在下面的示例中，我创建了一个自动播放设置为 2 秒的随机幻灯片动画，只是为了向您展示每张幻灯片都在播放不同的动画。

示例:

$(document).ready(function() {


  var owl = $('.owl-carousel');

  //init default carousel
  owl.owlCarousel({
    animateOut: getRandomAnimation,
    animateIn: getRandomAnimation,
    items: 1,
    margin: 30,
    stagePadding: 30,
    smartSpeed: 450,
    autoplay: true,
    autoplayTimeout: 2000
  });

 

  function getRandomAnimation() {
    var animationList = ['bounce', 'zoomIn', 'flipInX', 'flash', 'pulse', 'rubberBand', 'jello'];
    return animationList[Math.floor(Math.random() * animationList.length)];
  }

});

.owl-carousel {
  max-width: 300px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
  <div class="item"><img src="https://dummyimage.com/600x400/287321/fff" />
    <h4>1</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/1fb84f/fff" />
    <h4>2</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/3369cc/fff" />
    <h4>3</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/287321/fff" />
    <h4>4</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/9253d6/fff" />
    <h4>5</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/948b46/fff" />
    <h4>6</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/239cba/fff" />
    <h4>7</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/cc43c1/fff" />
    <h4>8</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/7d2477/fff" />
    <h4>9</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/a3541f/fff" />
    <h4>10</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/225911/fff" />
    <h4>11</h4>
  </div>
  <div class="item"><img src="https://dummyimage.com/600x400/21378f/fff" />
    <h4>12</h4>
  </div>
</div>