Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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
});