Question

我创建了一个带有owlcarousel2库的幻灯片放映，我想为每张幻灯片设置一个不同的动画来显示在屏幕上。

例如，现在所有幻灯片从右到左显示在屏幕上，就像在普通幻灯片放映中一样。是否可以设置为每个幻灯片不同的显示运动，如从左到右为一些，从右到左为其他？

这是我的代码：

<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

您需要做两件事：

在您的信息页中加入animate.css。

创建自定义函数以从animate.css

提供的动画数组中进行选择

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

设置好这两件事后，您只需要初始化owl轮播并设置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>

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

1 个答案: