Slick: Slick sync sliders out of sync by 1 item each time

[danieltj27]

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

[leggomuhgreggo]

Hey @danieltj27 as a matter of policy the repo collabs don't service support requests which it sounds like this is, but, a lot of times I'll do it if I have a second but only if you first put it in a reduced test case. There's a jsfiddle you can fork from the contribution guidlines.

Closing pending fiddle

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

Ah cool. Either way it needs a year case. Thanks

[danieltj27]

I don't understand, what's a year case?

[leggomuhgreggo]

Hah, sorry: test* case