Why does the second slider leave during synchronization?

Question

JavaScript

Hello everyone, I'm trying to synchronize two sliders, made with the help of slick-carousel, when I scroll through one slider, only the background-color should change in the second one, but for some reason it starts to move.
Initially, the current element has left 0
https://imgur.com/a/pZrBaR7


When left is clicked, the left is minus and the slider starts moving, picking styles and looking at the settings of slicka itself this way and that, nothing happens ..

https://imgur. com/reADz5i
Noticed that slick-draggable and slick-track don't have the same viewports, but I can't figure out why either..

HTML code

<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 code

.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 code

$(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,
    });

});