css - 光滑的 slider 同步情况

Question

我正在使用 slick 的“ slider 同步”功能，如果 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-current 类？

Answer 1

我使用 slick 的内置 afterChange 事件来获取迭代并手动将其应用于导航:

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

@jiwebdev