动态改变中央幻灯片的宽度

我正在使用 swiper 和 next.js 13 编写一个轮播，但是我遇到了一个问题，当我更改活动幻灯片（位于中间）的宽度时，该幻灯片不在中间，而是稍微偏向一侧。

我使用 ResizeObserver 来跟踪所选幻灯片宽度的变化，但在这种情况下，幻灯片无法平滑地移动到中心并被传送。如何制作更改所选块宽度的平滑动画（不使用比例）？

const Carousel: React.FC = () => {
  const [swiperRef, setSwiperRef] = useState<SwiperClass>(null);
  const [clickedSlide, setClickedSlide] = useState<number>();

  const handleClickSlide = (swiper: SwiperClass) => {
    setClickedSlide(swiper.clickedIndex);
  };

  return (
    <ClickAwayListener onClickAway={() => setClickedSlide(undefined)} mouseEvent="onMouseDown">
      <div className={classNames(style['swiper-container'])}>
        <div className={style['swiper-prev']}>&larr;</div>

        <Swiper
          onSwiper={setSwiperRef}
          onClick={handleClickSlide}
          direction="horizontal"
          slidesPerView="auto"
          speed={600}
          slideToClickedSlide
          centeredSlides
          resizeObserver
          freeMode
          navigation={{
            nextEl: '.' + style['swiper-next'],
            prevEl: '.' + style['swiper-prev'],
          }}
          mousewheel={{
            sensitivity: 0.5,
          }}
          modules={[Navigation, Mousewheel, Manipulation]}
        >
          {
            slides.map((slide) => {
              const active = clickedSlide == index;

              return (
                <SwiperSlide className={classNames(style['swiper-slide'], active && style['swiper-slide-active'])}>
                  <SlideComponent slide={slide} active={active} swiper={swiperRef} />
                </SwiperSlide>
              );
            })
          }
        </Swiper>

        <div className={style['swiper-next']}>  &rarr;</div>
      </div>
    </ClickAwayListener>
  );
};

SlideComponent.tsx

const SlideComponent = React.forwardRef<HTMLDivElement, MapCarouselSlideProps>(({
  job,
  className,
  active,
  swiper,
  ...props
}, ref) => {
  const slide = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => slide.current!, []);

  useEffect(() => {
    if (!slide.current) {
      return;
    }

    const observer = new ResizeObserver(() => swiper.update());
    observer.observe(slide.current);

    return () => observer.disconnect();
  }, [active]);

  return (
    <div ref={slide} className={classNames(style['slide-component'], className)} {...props} >
      text
    </div>
  );
});

CSS

.swiper-slide {
  flex-basis: 280px;
  width: 280px;
  overflow: hidden;
  padding: 16px;
  transition: flex-basis 500ms ease-in-out !important;
}

.swiper-slide-active {
  flex-basis: 520px;
  width: 520px;
}

在寻找解决方案时，我在 swiper 项目的 git 中遇到了问题：
add width to swiper-slide-activemakescenteredSlidestofail