Почему уезжает второй слайдер при синхронизации?

Question

[Divji]

Всем привет пытаюсь синхронизировать два слайдера, сделаны с помошью slick-carousel, когда листаю один слайдер у второго должна меняться только background-color но он почему-то начинает ездить.
Изначально у текущего элемента стоит left 0
https://imgur.com/a/pZrBaR7


При клике left минусуется и слайдер начинает ехать, ковырял стили и так и сяк смотрел настройки у самого slicka, ничего не получается..

https://imgur.com/reADz5i
Заметил что у slick-draggable и slick-track не совпадают области просмотра, но тоже не могу понять почему..

Код HTML

<div class="slider-dots">
            <div class="slider-dots__item">
              <div class="dots-box">
                <div class="dots-box__number">01</div>
                <div class="dots-box__name">North Shore</div>
              </div>
            </div>
            <div class="slider-dots__item">
              <div class="dots-box">
                <div class="dots-box__number">02</div>
                <div class="dots-box__name">South Shore</div>
              </div>
            </div>
            <div class="slider-dots__item">
              <div class="dots-box">
                <div class="dots-box__number">03</div>
                <div class="dots-box__name">West Shore </div>
              </div>
            </div>
            <div class="slider-dots__item">
              <div class="dots-box">
                <div class="dots-box__number">04</div>
                <div class="dots-box__name">East Shore</div>
              </div>
            </div>
          </div>

Код SCSS

.slider-dots {
    position: absolute;
    right: 50px;
    bottom: 36px;
    max-width: 920px;
    width: 100%;
    color: #ffffff;

    .slick-current {
        .dots-box {
            border-top: 4px solid aqua;
            transform: 0;
        }
    }
}
.dots-box {
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    padding-top: 6px;
    border-top: 4px solid #fff;
    text-transform: capitalize;

    &-number {
        font-weight: 800;
        font-size: 24px;
        line-height: 34px;
    }

    &-name {
        font-weight: 300;
        line-height: 19px;
    }
}

.slick-track {
    left: 0;
}

Код JQUERY

$(function(){
    $('.header__slider').slick({
        infinite: true,
        fade: true,
        prevArrow: '<img class="header__slider-arrow header__slider-arrow--left" src="./images/dest/arrow-lf.svg" alt="left">',
        nextArrow: '<img class="header__slider-arrow header__slider-arrow--right" src="./images/dest/arrow-rg.svg" alt="right">',
        asNavFor: '.slider-dots',
    });

    $('.slider-dots').slick({
        asNavFor: '.header__slider',
        slidesToShow: 4,
        slidesToScroll: 4,
        useTransform: false,
    });

});