Slick sync sliders out of sync by 1 item each time

I’m trying to achieve a history / timeline effect using two Slick sliders using the sync function. I have everything setup and it seems to work except the second slider (the ‘navigation’) doesn’t work as in it’s one slide behind what is on the left slide.

There are four years, 1999, 2001, 2002 and 2005. It’s almost as if the slider directions are reversed for some reason. When you load the page, the nav starts on 1999 but on the left, the main content slider starts on 2005.

Example image…

The HTML markup…

    <!-- ko if: hasItems() -->
    <div class="listings-list__items history-timeline-data" data-bind="foreach: items">
        <div class="history-entry">
            <img class="history-entry__image" data-bind="attr: { src: $data.PrimaryImageUrl }" />
            <div class="history-entry__content">
                <div class="history-entry__content-year" data-bind="text: Year"></div>
                <div class="history-entry__content-name" data-bind="text: Name"></div>
                <div class="history-entry__content-text" data-bind="text: Text"></div>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <!-- ko if: hasItems() -->
        <div class="listings-list__items history-timeline-nav" data-bind="foreach: items">
            <div class="history-entry">
            <div class="history-nav-link" data-bind="text: Year"></div>
        </div>
    </div>
    <!-- /ko -->

The jQuery/Slick markup…

    // Initialise the Slick slider
    $(".history-timeline-data").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        vertical: true,
        centerMode: true,
        centerPadding: "0px",
        autoplay: false,
        infinite: true,
        arrows: false,
        swipe: true,
        verticalSwiping: true,
        asNavFor: ".history-timeline-nav"
    }), $(".history-timeline-nav").slick({
        slidesToShow: 8,
        slidesToScroll: 1,
        vertical: true,
        centerMode: true,
        centerPadding: "0px",
        autoplay: false,
        infinite: true,
        arrows: true,
        swipe: false,
        verticalSwiping: true,
        asNavFor: ".history-timeline-data"
    });

Steps to reproduce the problem

1. Set up slider sync with two sliders
2. Load the page up and slide through one of the sliders

What is the expected behaviour?

Both sliders to be in sync

What is observed behaviour?

The sliders are out of sync by 1.

More Details

• Chrome v53 stable channel
• Not sure, minified in system packages (latest?)
• I don’t think so no

[danieltj27]

Well not so much support, but I found out the issue. It seems to be a bug with some options I had set.

Using both vertical and centerMode together as true causes the second slider to skip ahead by one. When I took center mode out of the settings (essentially false), it worked fine again. So not much of an issue for me due to the setup, but definitely a bug, that’s for sure.

[leggomuhgreggo]

Hah, sorry: test* case