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

Question

我正在尝试使用灵活的 Slider 创建一个 slider ，允许用户选择该部分的标题并查看它的幻灯片，但也提供自动播放的选项。

这些东西工作正常。但是我需要一些方法来对应它，以便当它自动播放时，它对应于事件导航并改变它的颜色。

现在，如果用户单击它，它只会为事件幻灯片标题显示一种新颜色。我也希望它在自动播放时这样做

我该怎么做？？

这是我现在正在使用的代码

Js Bin

我唯一改变的是 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

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