jQuery 両端に画像が見切れてるスライダーをつくりたい

前提・実現したいこと

レスポンシブに対応した両端に画像が見切れているスライダーを作りたい
のですが、画面幅を小さくしたときに真ん中の画像が徐々に左へずれていってしまいます。
スライド量を調整したりしましたがなかなかうまくできません。。。

そこで、
何か足りない箇所などございましたらアドバイスなどをいただきたいです。
お手数をおかけ致しますが、よろしくお願い致します。

該当のソースコード

    const $slideWrap = $(".p_top_mainVisual_slideWrap");
    const $slideGroup = $slideWrap.find(".p_top_mainVisual__list");
    const $slide = $slideGroup.find(".p_top_mainVisual__item");

    function cloneSlide(){
      const $firstSlide = $slideGroup.find("li:last-child");
      const $firstSideSlide = $slideGroup.find("li:nth-last-child(2)");
      const $lastSlide = $slideGroup.find("li:first-child");
      const $lastSideSlide = $slideGroup.find("li:nth-child(2)");

      $firstSlide.clone().prependTo($slideGroup);
      $lastSlide.clone().appendTo($slideGroup);
      $firstSideSlide.clone().prependTo($slideGroup);
      $lastSideSlide.clone().appendTo($slideGroup);
    }

    function changeSlide(){

      const duration = 1000;
      const windowSm = 768;
      let windowWidth = $(window).width();

      if (windowWidth <= windowSm) {
        $slideGroup.animate({
          left:"-" + 290 * (currentIndex + 1.85) + "px"
        },duration);
        if(currentIndex == slideCount){
          currentIndex = 0;
          $slideGroup.animate({
            left:"-" + 540 + "px"
          },0);
        }else if(currentIndex == -1){
          currentIndex = slideCount - 1
          $slideGroup.animate({
            left:"-" + 290 * (currentIndex + 1.85) + "px"
          },0);
        }
      } else {
        $slideGroup.animate({
          left:"-" + 380 * (currentIndex + 1.2) + "px"
        },duration);
        if(currentIndex == slideCount){
          currentIndex = 0;
          $slideGroup.animate({
            left:"-" + 440 + "px"
          },0);
        }else if(currentIndex == -1){
          currentIndex = slideCount - 1
          $slideGroup.animate({
            left:"-" + 380 * (currentIndex + 1.2) + "px"
          },0);
        }
      }
      indicatorUpdate();
    }