slick slider - syncing autoplay and active navigation

Question

I am trying to use the slick Slider to create a slider that allows a user to select the title of the section and see the slide for it but also give the option for it to autoplay.

The stuff works fine. But I need some way to correspond into make it so that when it autoplays, it corresponds to the active navigation and changes it color.

Right now it only show a new color for the active slide title if a user is clicking it. I want it to do so on autoplay also

how would I do that??

Here is the code I have working right now

Js Bin

The only thing I changed is that autoplay option that does not exist on the demo of slick slider

 $('.slider-for').slick({
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows: false,
 fade: true,
 asNavFor: '.slider-nav',
 autoplay:true

  });
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});

Solution 1

http://jsfiddle.net/bpbaz10L/

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,        
    autoplay:true,
    //trigger after the slide appears
    // i is current slide index
    onAfterChange:function(slickSlider,i){
         //remove all active class
         $('.slider-nav .slick-slide').removeClass('slick-active');
         //set active class for current slide
         $('.slider-nav .slick-slide').eq(i).addClass('slick-active');         
     }

});


//set active class to first slide
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');

Solution 2

If you are using Slick Slider Version: 1.5.5 you will need to call afterChange on().

// function event,slick and index
// version 1.5+ uses slick-current stead of slick-active
$('.slider-for').on('afterChange', function(event,slick,i){
  $('.slider-nav .slick-slide').removeClass('slick-current');
  $('.slider-nav .slick-slide').eq(i).addClass('slick-current');    				 
});

// remember document ready on this
$('.slider-nav .slick-slide').eq(0).addClass('slick-current');