光滑的滑块 - 同步自动播放和活动导航

2022-01-24 00:00:00 slider jquery javascript carousel

我正在尝试使用光滑的 Slider 创建一个滑块，允许用户选择该部分的标题并查看它的幻灯片，但也可以选择自动播放.

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.

这些东西很好用.但是我需要一些方法来对应 make 它，以便当它自动播放时，它对应于活动导航并改变它的颜色.

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

Js Bin

我唯一改变的是光滑滑块演示中不存在的自动播放选项

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
});

推荐答案

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');

相关文章