Swiperのスライドスピードを調整する方法を教えて頂きたいです。

Swiperのスライドスピードの調整方法が分からず困っております。

現在、Swiperでスライドが止まることなく動き続けるスライダーを作っており、
スムーズにスライドし、ループし続ける実装までは出来ました。
ナビゲーションのクリック時のみスライドスピードを変化させたいのですが、
どうも上手く出来ず困っております。

理想的な動き

ナビゲーションを押したら
スライド２が一番左に、早いスピードで移動してくれるのが理想です。
[1,2,3,4]→[2,3,4,5]

試したこと１ではスライドは理想なのですが、
スライドのスピードが変化しないため、
ナビゲーションが動いていることが分かりません。
[1,2,3,4]→[2,3,4,5]

試したこと２ではスライドの際のスピードは加速されるのですが、
スライド２を通り過ぎてスライド３が一番左に来てしまいます。
[1,2,3,4]→[3,4,5,6]

下記のURLが現在実装出来ている状態のものです。
https://jsfiddle.net/L31f87xg/29/

試したこと1

試したことは、ナビゲーションクリック時にautoplayをストップし、activeIndexを取得したのち、
slideTo(インデックス,スピード)でactiveのスライドが左端に早いスピードで移動するように設定したのですが、

既にactiveである要素(Swiperは既にスライド済みと認識している？)なので、slideToが使用出来ませんでした。

$(".swiper-button-next").click(function() {
        mySwiper.autoplay.stop();
        const active = mySwiper.activeIndex;
        mySwiper.slideTo(active ,200);
    });

試したこと2

理想に近い挙動に一番近づけたのはこちらの実装です。

1ではactiveなスライドにはslideToが使用出来ないことがわかったので、
activeなスライドの次のスライドにslideToで移動するようにしました。

この結果、ナビゲーションをクリックした際のスピードの変化は理想的な挙動になりました。

しかし、avtiveなスライドの次のスライドに移動してしまうため、
最初のクリック時にactiveなスライドがスライダーから押し出されてしまいます。

$(".swiper-button-next").click(function() {
        mySwiper.autoplay.stop();
        const active = mySwiper.activeIndex;
        mySwiper.slideTo(active + 1 ,200);
    });

実装してるコード

<div class="slider-container">
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <ul class="swiper-wrapper list">
      <!-- Slides -->
      <li class="swiper-slide">
        <div class="desc">
          1
        </div>
      </li>
      <li class="swiper-slide">
        <div class="desc">
          2
        </div>
      </li>
      <li class="swiper-slide">
        <div class="desc">
          3
        </div>
      </li>
      <li class="swiper-slide">
        <div class="desc">
          4
        </div>
      </li>
      <li class="swiper-slide">
        <div class="desc">
          5
        </div>
      </li>
      <li class="swiper-slide">
        <div class="desc">
          6
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="swiper-button-prev swiper-custom-button">
  <
</div>
<div class="swiper-button-next swiper-custom-button">
  >
</div>

const mySwiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 1,
        },
        speed: 5000,
        spaceBetween: 100,
        loop: true,
        freeMode: true,
        slidesPerView: 1,
        breakpoints: {
            1200: {
                slidesPerView: 4,
                spaceBetween: 0
            },
            930: {
                slidesPerView: 4,
                spaceBetween: 0
            },
            600: {
                slidesPerView: 3,
                spaceBetween: 0
            },
            400: {
                slidesPerView: 2,
                spaceBetween: 0
            },
            300: {
                slidesPerView: 1.15,
                spaceBetween: 0
            }
        }
    });
    $(".swiper-button-prev").mouseleave(function() {
        mySwiper.autoplay.start();
        console.log('slider started again');
    });
    $(".swiper-button-next").mouseleave(function() {
        mySwiper.autoplay.start();
        console.log('slider started again');
    });
    $(window).scroll(function() {
        mySwiper.autoplay.start();
        console.log('window was scrolled');
    });
    $(".swiper-button-prev").click(function() {
        mySwiper.autoplay.stop();
        const active = mySwiper.activeIndex;
        mySwiper.slideTo(active - 1,200);
        console.log('swiper-button-prev was clicked');
    });
    $(".swiper-button-next").click(function() {
        mySwiper.autoplay.stop();
        const active = mySwiper.activeIndex;
        mySwiper.slideTo(active + 1 ,200);
        console.log('swiper-button-next was clicked');
    });

li {
  list-style-type: none;
}

.slider-container {
    width: 90%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.list {
    width: 100%;
    height: 100%;
}
.desc {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    width: 30vw;
    height: 300px;
    border: 1px solid #333;
    margin: 20px auto 0;
    text-align: center;
    font-size: 20px;
    @media screen and (max-width:930px) {
        width: 27vw;
    }
    @media screen and (max-width:600px) {
        width: 40vw;
    }
    @media screen and (max-width:400px) {
        width: 67vw;
    }
}
.swiper-custom-button{
    background-image: none !important;
    color: #333;
    text-align: center;
    width: 24px !important;
    height: 64px !important;
    line-height: 64px;
}
.swiper-button-prev{
    &:after{
        content: '' !important;
    }
}
.swiper-button-next{
    &:after{
        content: '' !important;
    }
}
.swiper-wrapper {
  -webkit-transition-timing-function:linear!important;
  -o-transition-timing-function:linear!important;
  transition-timing-function:linear!important;
}