Skip to content

Instantly share code, notes, and snippets.

Created May 18, 2020 09:05
What would you like to do?
Use Animate.css for Slick slider transitions
// Note: This assumes you already have the CSS set up for the classes you want to use.
function initCarousel() {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
adaptiveHeight: false,
fade: true,
speed: 0, // removes Slick's standard animation
}).on('beforeChange', function(event, slick, currentSlideIndex, nextSlideIndex) {
if(nextSlideIndex > currentSlideIndex) {
// Animation to go to next slide
$('.my-carousel .slick-slide[data-slick-index=' + currentSlideIndex + ']').addClass('fadeOutLeft').removeClass('fadeInRight');
$('.my-carousel .slick-slide[data-slick-index=' + nextSlideIndex + ']').addClass('fadeInRight').removeClass('fadeOutLeft fadeOutRight');
} else {
// Animation to go to previous slide
$('.my-carousel .slick-slide[data-slick-index=' + currentSlideIndex + ']').addClass('fadeOutRight').removeClass('fadeInRight');
$('.my-carousel .slick-slide[data-slick-index=' + nextSlideIndex + ']').addClass('fadeInLeft').removeClass('fadeOutLeft fadeOutRight');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment