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

我正在尝试使用光滑的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

如果您使用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 3

如果要显示导航滑块中的所有幻灯片，dm4web答案是完美的。 如果你有更多隐藏的幻灯片（比如你有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 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'); } }); }