Slick slider with animate.css

main.js

    $('#banner-home .slick-home-banner').on('init', function(e, slick) {
        var $firstAnimatingElements = $('div.banner-item:first-child').find('[data-animation]');
        doAnimations($firstAnimatingElements);    
    });
    $('#banner-home .slick-home-banner').on('beforeChange', function(e, slick, currentSlide, nextSlide) {
              var $animatingElements = $('div.banner-item[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
              doAnimations($animatingElements);    
    });
    $('#banner-home .slick-home-banner').slick({
       autoplay: true,
       autoplaySpeed: 8000,
       speed: 2000,
       dots: true,
       fade: true,
       prevArrow: false,
       nextArrow: false
    });
    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);
            });
        });
    }

Please add a webpage with full example of this.

Please add a webpage with full example of this.

Thanks for the suggestion @skwebs. Will try to create a demo and post it on my blog soon.