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:
h/t @jiwebdev