问题描述
我正在尝试使用光滑的滑块创建一个滑块,该滑块允许用户选择该部分的标题并查看它的幻灯片,但还提供了使其自动播放的选项.
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.
这些东西工作正常.但是我需要某种方式来制作它,以便当它自动播放时,它对应于活动的导航并更改其颜色.
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.
现在,如果用户单击它,则仅为活动的幻灯片标题显示新的颜色.我也想在自动播放中这样做
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
我该怎么做?
这是我现在正在使用的代码
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
});
推荐答案
$('.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');
这篇关于光滑的滑块-同步自动播放和主动导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!