Skip to content

Instantly share code, notes, and snippets.

@kirandash
Created April 25, 2017 11:28
Show Gist options
  • Save kirandash/67da0c020f3618de2f65742738234e17 to your computer and use it in GitHub Desktop.
Save kirandash/67da0c020f3618de2f65742738234e17 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);
});
});
}
@skwebs
Copy link

skwebs commented Mar 2, 2020

Please add a webpage with full example of this.

@kirandash
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment