光滑的滑块 - 同步自动播放和主动导航

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

如果您使用的是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');    				 
});

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

Answer 2

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