Slick: Synced slider with all slides shown does not advance "current"

[MissFerrety]

EDIT: JSFiddle here

First of all, let me say - I love Slick. It's amazing. On behalf of developers the world over, a big thank you to @kenwheeler.

However, I came across a problem in using it in one of the prescribed ways -- leave it to me to find the one use case where some otherwise great thing doesn't work. I'm utilizing the asNavFor setting between two sliders - one as a single (show/scroll 1) and one as an index (text-only). There are 4 slides total.

The intent is for the index to remain static with the exception of highlighting the current slide. However! It works appropriately _except_ when all slides are shown in the nav. When all slides are set to be shown, clicking the nav advances the slider, but when the slider moves, the nav's "slick-current" class toggle is not triggered. To be clear, it _does_ work just fine when slidesToShow for the nav is set to anything below 4, and also correctly changes both sliders when the nav is clicked.

$('.slider').slick({
    slidesToShow: 1,
    prevArrow: '<div class="arrow feat-prev">&larr;</div>',
    nextArrow: '<div class="arrow feat-next">&rarr;</div>',
    slide: '.featured-slide',
    asNavFor: '.slider-nav',
    fade: true,
    autoplay: true,
});

$('.slider-nav').slick({
    slidesToShow: 4,
    prevArrow: '<div class="arrow feat-prev">&larr;</div>',
    nextArrow: '<div class="arrow feat-next">&rarr;</div>',
    slide: '.slide-link',
    asNavFor: '.slider',
    arrows: false,
    focusOnSelect: true
});

[simeydotme]

Can you create a JSfiddle demonstrating the two cases, please? :)

[anteksiler]

Happens to me as well. You can check here: http://bronx.fuelthemes.net/shop/dresses/easy-love-dress/

[MissFerrety]

The example @anteksiler posted is a great live example of what I'm facing. I have mine on local and password-protected on staging, so the dumbed-down fiddle will have to do.

https://jsfiddle.net/b3kzaod9/

[anteksiler]

@simeydotme Hi there, is my demo url enough to show the issue? I can create a js fiddle, but it's basically the same result. Navigating by the main image does not update the thumbnails if all available thumbnails are shown.

[anteksiler]

@kenwheeler Hi Ken, have you had a time to look at this?

[athanph]

Same thing here. Even if all thumbnails are not shown while infinite is disabled, "current" does not sync.

Sync "current" only happens when 1) 'infinite' is true and 2) 'slidesToShow' is less than the slide items.

[anteksiler]

If you comment out these lines, you get a partial fix:

https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L2101-L2103

[kenwheeler]

After reviewing the JSFiddle, there is a very simple fix that can be applied using the existing API. https://jsfiddle.net/b3kzaod9/3/

[anteksiler]

Hi @kenwheeler and thanks for looking into this.
However, if you click on the navigation arrows twice or very fast, the class change fails to keep up.

Edit: Sorry, my bad, it is working as suggested.

[MissFerrety]

Typo in the added function made it only follow on auto-progress but not click. slider-2 on the last JS function should read slider-1. Thanks for this.

Will leave closing up to @kenwheeler for if he considers this fully addressed or leave it for when the issue is fixed in default usage.

[entozoon]

I've forked and fixed @kenwheeler's JSFiddle fix and added a .not('.slick-clone') in there, as otherwise .eq() doesn't ignore all the cloned elements that are generated in infinite mode.
https://jsfiddle.net/entozoon/k37d7vvL/1/

[simonberger]

Following up the comment of kenwheeler. Does this mean this bug can't be fixed right now?
I did not look into the work of entozoon.
Out of a users point this problem or the course of this problem is really hard to find. I accidently stumbled over this issue.
Also I do not like the work around you posted because I use angular.

[mandar-k]

@kenwheeler thnx for the fiddle . I needed the same. nice slider cheers...!!!

[simeydotme]

Should be fixed by https://github.com/kenwheeler/slick/pull/2040 :smile:
Please try your use-cases on master code.

[roose]

@simeydotme, nice, but what about slick.min.js ? :smile:
Long thought why does not work, ah! Changes is only in slick.js :confused:

[carasmo]

@simeydotme : thank you VERY much for this!

[jvelumani]

Can some one tell me how to make the horizontal thumbnail to vertical thumbnail in Slider Syncing

[Nishantart]

Add this code, will work perfectly
$('.slick').on('beforeChange', function(event,slick,slide,nextSlide) {
$('.slider-nav-thumbnails').find('.slick-slide').removeClass('slick-current').eq(nextSlide).addClass('slick-current');
});

[aeu]

Thank you guys, this was a great thread. I had this exact same problem.