Slick: First slide does not animate when slider is initiated

[rahulv3a]

When the slick slider initiates, the first slide does not animate. However, if you go back the first slide from any other slide (using pagination) it animates like it should.

Here is what I'm trying to do https://jsfiddle.net/rahulnever2far/ytkft6kn/

I have the following in my JS:

$('.slick').slick({
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  dots: true,
  arrows: true,
  speed: 1000,
  pauseOnHover: false,
  useTransform: true
});

My CSS is as follows:

.wrapper {
  width: 500px;
  margin: 0 50px;
}

.slick-slide {
  overflow: hidden;
}

.slick-slide-image {
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

.slick-active .slick-slide-image {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 10s ease-out;
  transition: all 10s ease-out;
}

.slick-prev:before,
.slick-next:before {
  color: #999;
}

Please let me know if there is any CSS/JS workaround.

EDIT: Added JS and CSS codes.

[leggomuhgreggo]

This is more of a support issue than a bug with the slider, so I'm closing it. But having looked at it real quick, I think the issue is that you're controlling animation with the addition of the slick-active class, which is how the slide is initialized so there's no change to trigger the animation. I recommend tying into the slick events.

[rahulv3a]

@leggomuhgreggo Thank you for pointing me to the right direction.

I managed to animate the first slide using init event.

• When init event is fired, I removed .slick-active and added .reset-animation. reset-animation resets scale of .slick-slide-image to 1 with 0s of transition.
• Then after 1ms of delay, I removed .reset-animation and added .slick-active to animate the first the slide.

Now my have the following code in my JS and CSS (sharing it jus in case anyone else is stuck on the same).

JS

var $slick_carousel = $('.slick');

$slick_carousel.on('init', function(event, slick) {
  $slick_carousel.find('.slick-current').removeClass('slick-active').addClass('reset-animation');
  setTimeout( function() {
    $slick_carousel.find('.slick-current').removeClass('reset-animation').addClass('slick-active');
  }, 1);
});

$slick_carousel.slick({
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  dots: true,
  arrows: true,
  speed: 1000,
  pauseOnHover: false,
  useTransform: true
});

CSS

.wrapper {
  width: 500px;
  margin: 0 50px;
}

.slick-slide {
  overflow: hidden;
}

.slick-slide-image {
  height: 300px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 3s ease-out;
  transition: all 3s ease-out;
}

.slick-active .slick-slide-image {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 10s ease-out;
  transition: all 10s ease-out;
}

.reset-animation .slick-slide-image {
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0s ease-out;
  transition: all 0s ease-out;
}

I know this is not probably the best solution. But this is the only way I could get it to work like I wanted with my limited JS knowledge.

If anyone knows a better way to accomplish the same, please feel free to share.

[rahulv3a]

@kenwheeler, @leggomuhgreggo and others who are maintaining it so actively: Thank you for all the time you put into this plugin. I find myself it using in my almost every project. _the last carousel we'll ever need_ indeed :+1:

[alexbovey]

Thanks @rahulnever2far - this helped me.