解决Slick slider 用 animate.css动画时，第一个slider动画不起作用的问题。

Slick 是个网页轮播组件 https://github.com/kenwheeler/slick

Animate.css是一个css3动画库https://github.com/daneden/animate.css

两者常结合使用，能达到比较好的效果。

但是 Slick slider 用 animate.css动画时，第一个slider动画不起作用的问题，可以用以下方法解决！

html代码：

<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>

css代码：

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;
    }
}

js代码：

$(document).ready(function() {
    $('#hero-slider').on('init', function(e, slick) {
        var $firstAnimatingElements = $('div.hero-slide:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElements);    
    });
    $('#hero-slider').on('beforeChange', function(e, slick, currentSlide, nextSlide) {
              var $animatingElements = $('div.hero-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
              doAnimations($animatingElements);    
    });
    $('#hero-slider').slick({
       autoplay: true,
       autoplaySpeed: 10000,
       dots: true,
       fade: true
    });
    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);
            });
        });
    }
});

演示地址 https://codepen.io/anon/pen/YbyZOm