Delay asNavFor on(afterChange)

[davshoward]

Is it possible to delay the firing of a asNavFor carousel using .on('afterChange')?

$('.carousel').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  asNavFor: '.carousel-images',
  autoplay: false,
  dots: true,
  speed: 500,
  fade: true
});

$('.carousel-images').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  asNavFor: '.carousel',
  autoplay: false,
  speed: 500,
  fade: true
});

$('.carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
  // Possibly something here to fire the method of $('.carousel-images')
});

[Eldzej]

Since you are using fade transitions, this is rather easy.

Delete the asNavFor option from both sliders Change afterChange to beforeChange Add this bit of code inside beforeChange

setTimeout(function(){
  .carousel-images.slick("slickGoTo",nextSlide);
},200);

This will delay the moving of .carousel-images by 200ms

For "sliding" transitions, this is something I am still struggling with