Css – Slick slider sync situation


I'm using slick's "Slider Syncing" feature, and if slidesToShow == the total number of slides, the .slick-current class in the nav is not shifted when the top carousel is slid.

Here's the html:

<div class="slider slider-for">
<div class="slider slider-nav">

Here's the relevant 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 demonstrating the problem is here: http://jsfiddle.net/xd2h934n/

How can I get the .slick-current class to be moved in this case?

Best Solution

I used slick's built-in afterChange event to grab the iteration and manually applied it to the nav:

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

Related Question