How to fix bug in slick slider?

Question

css

Yuzayu slick, please tell me how to fix this nonsense
. If the pictures in navFor block 2 or 3, then they jump crookedly, can I do something so that they do not scroll?

Picture

Slider initialization code

$('.product-slider-big').slick({
  	slidesToShow: 1,
  	slidesToScroll: 1,
    infinite: true,
    fade: true,
  	asNavFor: '.product-slider-small',
  	arrows: true,
    prevArrow: '<div class="prev"><i class="fal fa-angle-left"></i></div>',
    nextArrow: '<div class="next"><i class="fal fa-angle-right"></i></div>',
    responsive: [
      {
        breakpoint: 460,
        settings: {
      	   arrows: false,
        }
      }
    ]
  });
  $('.product-slider-small').slick({
  	slidesToShow: 3,
  	slidesToScroll: 3,
    infinite: true,
  	asNavFor: '.product-slider-big',
    centerMode: true,
    centerPadding: '0px',
    focusOnSelect: true,
  	arrows: true,
    prevArrow: '<div class="prev"><i class="fal fa-angle-left"></i></div>',
    nextArrow: '<div class="next"><i class="fal fa-angle-right"></i></div>'
  });

If there are 4 or more pictures, like here , then everything is OK

Answer 1

No way. Either don't use slick or don't use navigation. Switch by arrows in the same way as you switch by clicking on a small picture.
In general, this case is an example of where the slick is inappropriate. IMHO, but I wouldn't use any sliders there.

Answer 2

Try turning off the centerMode of the preview slider so that the slick doesn't push the active slide to the center.

Answer 3

check the number of pictures, and after that run initialization with/without centerMode...