滑动滑块同步情况

Question

我正在使用滑块的“滑块同步”功能，并且如果slidesToShow ==滑块总数，导航中的.slick-current类是而不是在滑动顶部转盘时发生了移位。

这里的HTML：

<div class="slider slider-for"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
</div> 
<div class="slider slider-nav"> 
    <div><p>1</p></div> 
    <div><p>2</p></div> 
    <div><p>3</p></div> 
    <div><p>4</p></div> 
</div> 

下面是相关的JS：

jQuery('.example2 .slider-for').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    asNavFor: '.example2 .slider-nav' 
}); 
jQuery('.example2 .slider-nav').slick({ 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    asNavFor: '.example2 .slider-for', 
    centerMode: false, 
    focusOnSelect: true 
}); 

的jsfiddle证明了问题就在这里：http://jsfiddle.net/xd2h934n/

我怎样才能获得.slick电流类在这种情况下移动？

Answer 1

我用光滑的内置改动后的事件抢迭代和手动将其应用到导航：

jQuery('.slider-for').on('afterChange', function(event, slick, direction){ 
    jQuery('.slider-nav .slick-active:eq('+slick.currentSlide+')').addClass('slick-current').siblings().removeClass('slick-current'); 
}); 

H/T @jiwebdev

Answer 2

这不断得到标记为已修复GitHub上，但它仍然不起作用。

这个js应该这样做：

var slides = $(".slider-for .slick-track > .slick-slide").length; 
$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
    var inFocus = $('.slider-for .slick-current').attr('data-slick-index'); 
    $('.slider-nav .slick-current').removeClass('slick-current'); 
    $('.slider-nav .slick-slide[data-slick-index="' + inFocus + '"]').addClass('slick-current'); 
}); 

Answer 3

mike_freegan的回答是非常有益的，但是，它并没有解决导航滑盖的进步（在实际推进幻灯片条款）。我通过在导航元素上触发点击事件来调整自己的答案，而不是仅仅向其应用必要的类别（从而触发其他事件/回调）：

var slides = $(".slider-for .slick-track > .slick-slide").length; 
$('.slider-for').on('afterChange', function(event, slick, currentSlide, nextSlide){ 
    var inFocus = $('.slider-for .slick-current').attr('data-slick-index'); 
    $('.slider-nav .slick-current').removeClass('slick-current'); 
    $('.slider-nav .slick-slide[data-slick-index="' + inFocus + '"]').trigger('click'); 
});