How to change a position of an active item in Slick JS?-CodePudding

I've got a problem with Slick JS. I gotta center an active item as the second in a row, but it's automatically centralised as the third in a row.

jQuery(document).ready(function($) {
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slider-nav',
    centerMode: true,

    responsive: [{
      breakpoint: 800,
      settings: {
        arrows: false,
      },
    }, ]
  });
  $('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    arrows: false,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 1000,
    
    responsive: [{
      breakpoint: 800,
      settings: {
        slidesToShow: 1,
      },
    }, ]
  });
})

I tried many times to find any solution in the Internet, but all my tries have failed