Css – Slick slider sync situation

cssslick.js

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>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>

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 Answer

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 Topic