Ken Wheeler Slick Slider 1.4 - .slick-active激活asNavFor中所有可见的,而不是显示的那个

Question

当用户点击拇指或主滑块前进时,您会认为.slick-active在拇指中指示主滑块中镜像的幻灯片,而是所有拇指都设置为.slick-active.我正在使用此脚本的1.4版.

演示:https://jsbin.com/mevaga/1/edit？ html,js,output

$(document).ready(function() {

    $('.portfolio-thumb-slider').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.portfolio-item-slider',
        dots: false,
        arrows: false,
        focusOnSelect: true
    });


    $('.portfolio-item-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.portfolio-thumb-slider'
    });


});

我尝试了什么:光滑的滑块 - 同步自动播放和主动导航 - 这不起作用.它曾经在这个脚本的旧版本中工作但仅在最初,一旦幻灯片前进它不起作用.

Answer 1

所以我摆弄了一下,这看起来很有效:

$('.portfolio-thumb-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  //remove all active class
  $('.portfolio-thumb-slider .slick-slide').removeClass('slick-active1');
  //set active class for current slide
     $('.portfolio-thumb-slider .slick-slide:not(.slick-cloned)').eq(currentSlide).addClass('slick-active1');  

.slick-active1 总是给当前活跃的拇指.

我同意你的看法,这个滑块本身没有这个功能很奇怪.

最后的工作实例