使用Swiper JS实现的轮播图点击导航箭头过渡不流畅求助

我使用Swiper JS库实现轮播图组件时遇到如下问题：点击轮播图下方的自定义导航箭头时，轮播过渡效果不流畅，尝试添加手动CSS过渡效果也未生效。但使用硬件键盘箭头键或鼠标拖拽操作时，轮播过渡是流畅的。附上相关实现代码，恳请各位提供帮助。

实现代码 #

JavaScript #

const not_active_slide_scale_value = 0.85;
const not_active_slide_opacity_value = 0.4;

var swiper_scale_active = new Swiper("[swiper_scale_active]", {
  slidesPerView: 1.5,
  parallax: true,
  loop: true,
  breakpoints: {
    320: {
      speed: 900 /* Duration of transition between slides (in ms) */ ,
      slidesPerView: 1.2,
    },
    640: {
      speed: 1400,
    },
  },
  keyboard: {
    enabled: true,
  },
  centeredSlides: true,
  loop: true,
  slideToClickedSlide: true,
  spaceBetween: 0,
  grabCursor: true,
  navigation: {
    nextEl: "[btn_group] [next2]",
    prevEl: "[btn_group] [prev2]",
  },
  effect: "creative",
  creativeEffect: {
    limitProgress: 2, // slides after 2nd before/after active will have same state
    prev: {
      opacity: not_active_slide_opacity_value,
      scale: not_active_slide_scale_value,
      translate: ["-90%", 0, 0],
    },
    next: {
      opacity: not_active_slide_opacity_value,
      scale: not_active_slide_scale_value,
      translate: ["90%", 0, 0],
    },
  },
});

/* CUSTOM ARROWS CODE (WE want 5 click on next will change 5 slides - the speed is 0) */
const prev = document.querySelector("[btn_group] [prev]");
prev.addEventListener("click", prev_slide);

function prev_slide() {
  swiper_scale_active.slidePrev(0);
}

const next = document.querySelector("[btn_group] [next]");
next.addEventListener("click", next_slide);

function next_slide() {
  swiper_scale_active.slideNext(0);
}

/* API event example (Not in use in this code) */
swiper_scale_active.on("slideChange", function() {
  console.log("slide changed");
});

swiper_scale_active.on("keyPress", function(swiper, keyCode) {
  console.log(swiper);
  console.log("keyCode", keyCode);
});

CSS #

html,
body {
  position: relative;
  min-height: 100%;
  --main-bg-color: black;
}

h1 {
  text-align: center;
  color: white;
}

body {
  background: var(--main-bg-color);
  font-family: Arial;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

[swiper_scale_active] .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  border-radius: 20px;
  border-color: transparent;
  /* shadow */
  box-shadow: 0 0 100px 40px var(--main-bg-color);
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  [swiper_scale_active] .swiper-slide {
    border-radius: 10px;
  }
}

[swiper_scale_active] .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* CUSTOM CSS "TRICK" => the link should work only on the active slide  */

[swiper_scale_active] .swiper-slide:not(.swiper-slide-active) a {
  pointer-events: none;
}


/* #### CUSTOM NEXT/PREV #### */

[btn_group] {
  text-align: center;
  margin-top: 16px;
}

[btn_group] button {
  background: transparent;
  padding: 10px 16px;
  border-width: 0px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.5s linear;
}

[btn_group] button:hover {
  opacity: 1;
}

[btn_group] svg {
  color: white;
}

HTML #

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<br>
<h1><a style="color: white;" target="_blank" href="https://swiperjs.com/">Swiper 11</a> - Scale Active Slide (API Creative Effect)</h1><br><br>

<div swiper_scale_active class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/623/1600/900" />
      <a href="#" id="form">Link</a>
    </div>
    <div class="swiper-slide">
      <div>
        <img src="https://picsum.photos/id/179/1600/900" />
        <a href="#">Link 2</a>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/25/1600/900" />
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

<div btn_group>
  <button prev>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="19" fill="none" xmlns:v="https://vecta.io/nano"><path d="M10.485 17.971L2 9.485 10.485 1" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
  </button>
  <button next>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="19" fill="none" xmlns:v="https://vecta.io/nano"><path d="M1.485 1l8.485 8.485-8.485 8.485" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path></svg>
  </button>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

内容的提问来源于stack exchange，提问作者Hybrid Developer