关于javascript：滑动滑块-同步自动播放和主动导航


slick slider - syncing autoplay and active navigation

我正在尝试使用光滑的滑块创建一个滑块，该滑块允许用户选择该部分的标题并查看它的幻灯片，但还提供了使其自动播放的选项。

这些东西工作正常。但是我需要某种方式使其与之对应，以便在其自动播放时对应于活动的导航并更改其颜色。

现在，如果用户单击它，则仅为活动的幻灯片标题显示新的颜色。我也想在自动播放上这样做

我该怎么做？

这是我现在正在使用的代码

Js Bin

我唯一更改的是自动播放选项，该选项在光滑滑块

的演示中不存在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 $('.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
});

如果您使用的是Slick Slider版本：1.5.5
您将需要调用afterChange on()。

1
2
3
4
5
6
7
8
9
// 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');    \t\t\t\t
});

// remember document ready on this
$('.slider-nav .slick-slide').eq(0).addClass('slick-current');\t

http://jsfiddle.net/bpbaz10L/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.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');
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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');
            }
        });

    }

如果要显示导航滑块中的所有幻灯片，dm4web答案是完美的。如果您有更多隐藏的幻灯片(例如，您有12张幻灯片，但一次只显示8张幻灯片)，则可以执行类似的操作，例如

1
2
3
4
5
6
7
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');