Ken Wheeler Slick Slider 1.4 - .slick-active 正在激活 asNavFor 中所有可见的，而不是显示的答案

【问题标题】：Ken Wheeler Slick Slider 1.4 - .slick-active is activating all visible in the asNavFor, not the one showingKen Wheeler Slick Slider 1.4 - .slick-active 正在激活 asNavFor 中所有可见的，而不是显示的
【发布时间】：2015-05-30 23:12:10
【问题描述】：

当用户单击拇指或主滑块以前进时，您会认为 .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'
    });


});

我尝试了什么：slick slider - syncing autoplay and active navigation -- 这不起作用。它曾经在这个脚本的旧版本中工作，但只是最初，一旦幻灯片前进，它就不起作用了。

【问题讨论】：

据我所知，.slick-active 类被赋予所有当前可见的拇指。所以在你的情况下，用 4 个拇指，而不是像你想要的那样。
是的，这就是发生的事情，但从逻辑上讲，flexslider、owlslider（现已放弃）和其他人的工作方式，一个显示和拇指是活动的，其余的不是，这是预期的.默认情况下真的很奇怪。

标签： jquery

【解决方案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 总是给当前活动的拇指。

我同意你的看法，奇怪的是这个滑块本身没有这个功能。

Final working example

【讨论】：

这太棒了！非常感谢！
这个脚本做的另一件烦人的事情是 onload 布局被搞砸了，除非你使用窗口加载而不是 doc ready，但我只是在准备好时更改不透明度。这是更好的版本：jsbin.com/dokina/1/edit?html,css,js
真的吗？我之前在我的一个项目中使用过光滑的滑块，但没有经历过类似的事情。但谁知道，在 Web 开发中没有什么是不可能的。. ;) 这是你找到的一个很好的解决方案。
不适用于“infinite: false”选项。帮助将不胜感激:)