slick slider - syncing autoplay and active navigation

carousel, javascript, jquery, slider

Solution

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');

Problem

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 }); ```

Original source