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

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

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

Answer 3

the dm4web answer is perfect if you are showing all the slides you have in your nav slider. If you have more slides that are hidden (say you have 12 slides, but show only 8 in your nav at once), you can do something similar, like

$('.slider-nav').on('afterChange', function(){

  $('.slider-nav .slick-slide').removeClass('current');
  $('.slider-nav .slick-active:first').addClass('current');
});

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

Answer 4

function _Slider(){
        $('#hm-slider ul').slick({
            dots: false,
            infinite: true,
            arrows:false,
            autoplay: true,
            autoplaySpeed: 5000,
            fade: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            asNavFor: '#slider-dots',
        }); 
        $('#slider-dots').slick({
            slidesToShow: 5,
            slidesToScroll: 1,
            asNavFor: '#hm-slider ul',
            dots: false,
            centerMode: false,
            focusOnSelect: true,
            variableWidth: true,
            centerMode: true,
            useCSS:true
        });

        //set active class to first slide
        $('#slider-dots .slick-slide').removeClass('slick-active');
        $('#slider-dots .slick-slide').eq(0).addClass('slick-active');
        $('#hm-slider ul').on({
            beforeChange: function(event, slick, current_slide_index, next_slide_index) {
                //remove all active class
                $('#slider-dots .slick-slide').removeClass('slick-active');
                //set active class for current slide
                $('#slider-dots .slick-slide[data-slick-index='+next_slide_index+']').addClass('slick-active');
            }
        });

    }