Slick Slider滑らかに逆スクロール｜画像の幅が違う

HTML

<div class="main-slider">
  <div><img src="mainimg1.png" alt="" /></div>
  <div><img src="mainimg2.png" alt="" /></div>
  <div><img src="mainimg3.png" alt="" /></div>
  <div><img src="mainimg4.png" alt="" /></div>
  <div><img src="mainimg5.png" alt="" /></div>
  <div><img src="mainimg1.png" alt="" /></div>
  <div><img src="mainimg2.png" alt="" /></div>
  <div><img src="mainimg3.png" alt="" /></div>
  <div><img src="mainimg4.png" alt="" /></div>
  <div><img src="mainimg5.png" alt="" /></div>
</div>

CSS

.main-slider .slick-slide {
  margin-left: 7px;
  margin-right: 7px;
  img {
    height: 500px;
    width: auto;
    margin-left:auto;
    margin-right:auto;
  display: block;
  }
}

jquery

$(function(){
  const $slider = $('.main-slider');
  let lastWidth = $(window).width(); // 前回の幅を記録

  // Slick初期化
  $slider.slick({
    autoplay: false,
    speed: 7000,
    cssEase: "linear",
    slidesToScroll: 1,
    infinite: true,
    swipe: false,
    arrows: false,
    dots: false,
    pauseOnFocus: false,
    pauseOnHover: false,
    variableWidth: true,
    initialSlide: 1
  });

  // 継続的にslickPrevを実行
  function autoSlide() {
    $slider.slick('slickPrev');
    setTimeout(autoSlide, 7000);
  }
  setTimeout(autoSlide, 100);

  // リサイズ時の処理
  let resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      const newWidth = $(window).width();
      if (newWidth !== lastWidth) { // 幅が変わった時だけ実行
        lastWidth = newWidth;
        $slider.slick('unslick');
        $slider.slick({
          autoplay: false,
          speed: 7000,
          cssEase: "linear",
          slidesToScroll: 1,
          infinite: true,
          swipe: false,
          arrows: false,
          dots: false,
          pauseOnFocus: false,
          pauseOnHover: false,
          variableWidth: true,
          initialSlide: 1
        });
        setTimeout(autoSlide, 100);
      }
    }, 250);
  });
});