Swiper React carousel 上类似 iPhone 的拖动/滑动平滑缓动滚动动画

如何解决Swiper React carousel 上类似 iPhone 的拖动/滑动平滑缓动滚动动画

我创建了以下 swiper carousel 组件：

const MyCarousel = ({ children }: Props) => {
  const navPrev = useRef<HTMLButtonElement>(null);
  const navNext = useRef<HTMLButtonElement>(null);

  const onBeforeInit = (swiper: SwiperCore): void => {
    const navigation = swiper.params.navigation as Navigationoptions;
    navigation.prevEl = navPrev.current;
    navigation.nextEl = navNext.current;
  };

  return (
    <div>
      <ArrowButton type="prev" ref={navPrevButton} />
      <ArrowButton type="next" ref={navNextButton} />
      <Swiper
        tag="section"
        wrapperTag="ul"
        slidesPerView="auto"
        onBeforeInit={onBeforeInit}
        spaceBetween={15}
        slidesOffsetBefore={15}
        slidesOffsetAfter={15}
        freeMode
        freeModeMomentumRatio={0.2}
        freeModeMomentumBounce={false}
        breakpoints={{
          1280: {
            spaceBetween: 30,slidesOffsetBefore: 0,slidesOffsetAfter: 0,},}}
      >
        {React.Children.map(children,(child: NodeCarouselChild) => (
          <SwiperSlide tag="li" key={child.key}>
            {React.cloneElement(child,{
              classes: styles.card,})}
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
};

export default MyCarousel;

如何实现类似 iPhone 的拖动/滑动滚动过渡？如果用户更用力地拖动/滑动它应该进一步滚动。如果用户不那么用力地拖动/滑动它应该减少滚动并且还以平滑的缓动动画结束滚动。