带有动画和个人延迟的光滑滑块

Question

我已经能够分别制作和延迟每一方。我的问题是第一张幻灯片出现然后它动画而不仅仅是动画。但其余的幻灯片都没问题，我很好，第一张幻灯片没有动画第一次，但当它循环回到第一张幻灯片时，它打破了。你能看出问题是什么吗？

$(document).ready(function() {
    var $slideshow = $("#hero-slider");
    var ImagePauses = [6000, 2000, 3000];

    // Init
    $slideshow.slick({
        initialSlide: 0,
        autoplay: true,
        autoplaySpeed: ImagePauses[0]
    });

    // Sliding settings
    $slideshow.on("afterChange", function(event, slick, currentSlide) {
        $slideshow.slick(
            "slickSetOption",
            "autoplaySpeed",
            ImagePauses[currentSlide],
            true
        );
    });

    $slideshow.on("init", function(e, slick) {
        var $firstAnimatingElements = $("div.hero-slide:first-child").find(
            "[data-animation]"
        );
        doAnimations($firstAnimatingElements);
    });

    $slideshow.on("beforeChange", function(e, slick, currentSlide, nextSlide) {
        var $animatingElements = $(
            'div.hero-slide[data-slick-index="' + nextSlide + '"]'
        ).find("[data-animation]");
        doAnimations($animatingElements);
    });

    function doAnimations(elements) {
        var animationEndEvents =
            "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
        elements.each(function() {
            var $this = $(this);
            var $animationDelay = $this.data("delay");
            var $animationType = "animated " + $this.data("animation");
            $this.css({
                "animation-delay": $animationDelay,
                "-webkit-animation-delay": $animationDelay
            });
            $this.addClass($animationType).one(animationEndEvents, function() {
                $this.removeClass($animationType);
            });
        });
    }
});

body {
    padding-top: 50px;
}
.slick-prev {
    left: 5px;
    z-index: 9999;
}
.slick-next {
    right: 5px;
}
.slick-dots {
    bottom: -10px;
}
.hero-slide {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}
.hero-content {
    height: 400px;
    display: table-cell;
    vertical-align: middle;
}
.slide-message {
    margin-bottom: 20px;
}
@media (min-width: 992px) {
    .hero-content {
        height: 500px;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>


<div id="hero-slider">
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/1');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInLeftBig" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="fadeInUpBig" data-delay="1s">LEARN MORE</a>
                </div>
                <div class="col-sm-6 hidden-xs">
                    <img src="//placehold.it/540x320" class="img-responsive" data-animation="fadeInRightBig" data-delay="0.5s" />
                </div>
            </div>
        </div>
    </div>
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/3');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="fadeInRight" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="fadeInUp" data-delay="1s">LEARN MORE</a>
                </div>
                <div class="col-sm-6 hidden-xs">
                    <img src="//placehold.it/540x320" class="img-responsive" data-animation="fadeInLeft" data-delay="0.5s" />
                </div>
            </div>
        </div>
    </div>
    <div class="hero-slide" style="background-image: url('http://lorempixel.com/1920/500/abstract/8');">
        <div class="container">
            <div class="row hero-content text-center">
                <div class="col-sm-6">
                    <img src="//placehold.it/720x320" class="img-responsive slide-message" data-animation="rotateIn" data-delay="0.5s" />
                    <a href="#" class="btn btn-primary" data-animation="bounceIn" data-delay="1.5s">LEARN MORE</a>
                </div>
                <div class="col-sm-6 hidden-xs">
                    <img src="//placehold.it/540x320" class="img-responsive" data-animation="rollIn" data-delay="0.5s" />
                </div>
            </div>
        </div>
    </div>
</div>