javascript 光滑的滑块 - 同步自动播放和活动导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27260225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
slick slider - syncing autoplay and active navigation
提问by new_frontenddev
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.
我正在尝试使用光滑的 Slider 创建一个滑块，允许用户选择该部分的标题并查看它的幻灯片，但还提供了自动播放的选项。
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.
东西很好用。但是我需要某种方式来对应 make 它，以便在它自动播放时，它对应于活动导航并更改它的颜色。
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
这是我现在正在使用的代码
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
});
回答by colOchimba
If you are using Slick Slider Version: 1.5.5 you will need to call afterChange on().
如果您使用的是 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'); 回答by dm4web
$('.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');
回答by mlaroy
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
如果您在导航滑块中显示所有幻灯片，则 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');
回答by Dishan TD
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');
}
});
}
