slick slider - синхронизация автовоспроизведения и активная навигация

Question

Я пытаюсь использовать слайдер Slider для создания слайдера, который позволяет пользователю выбрать заголовок раздела и увидеть слайд для него, а также дать возможность для автовоспроизведения.

Все работает отлично. Но мне нужно каким-то образом переписываться, чтобы сделать так, чтобы при его автовоспроизведении он соответствовал активной навигации и менял цвет.

В настоящий момент он отображает только новый цвет для активного названия слайдов, если пользователь нажимает на него. Я хочу, чтобы это было сделано на автовоспроизведении также

как бы я это сделал ??

Вот код, я работаю прямо сейчас

Js Bin

Единственное, что я изменился, что вариант автозапуск, который не существует на демо скользкий слайдера

$('.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

dm4web answe r идеально подходит, если вы показываете все слайды, которые у вас есть в навигаторе. Если у вас есть слайды, которые скрыты (скажем, у вас есть 12 слайдов, но показывает только 8 в вашем нав сразу), вы можете сделать что-то подобное, как

$('.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 3

Если вы используете Slick Slider Версии: 1.5. 5 вам нужно будет позвонить 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');  \t \t \t \t 
 
}); 
 

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

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

    }