滑動滑塊同步情況

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