How to make slick-slider work properly?

Question

JavaScript

How to make slick slider slider work properly?

The width of the slides is 200px, for the active 600, everything works fine, but the active slide first goes out of bounds and only then gets up as it should

https://www.youtube.com/watch?v=OfxZ649NmLY&featur...

$('.slider-nav').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    arrows: false,
    speed: 2000,
    variableWidth: true,
    focusOnSelect: true
  });

<div class="slider-nav">
        <div class="slider-nav__item"><img src="img/user1.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user2.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user3.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user4.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user5.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user6.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user7.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user8.png" alt=""></div>
        <div class="slider-nav__item"><img src="img/user9.png" alt=""></div>
      </div>

Answer 1

centerMode: true try