Skip to content

Instantly share code, notes, and snippets.

@speeday
Forked from kirandash/main.js
Created May 12, 2020 16:35
Show Gist options
  • Save speeday/5ed4d55de9e5a62425add26c19d6a2cb to your computer and use it in GitHub Desktop.
Save speeday/5ed4d55de9e5a62425add26c19d6a2cb to your computer and use it in GitHub Desktop.
Slick slider with animate.css
$('#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);
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment