我正在尝试使用光滑的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
});
答案 0 :(得分:7)
如果您使用的是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');
答案 1 :(得分:4)
$('.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');
答案 2 :(得分:0)
$('.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');
答案 3 :(得分:0)
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');
}
});
}