Swiper组件设置垂直轮播图（自动滚动+禁用手指滑动）

tsx文件如下

import React, { useEffect, useRef } from 'react';

import classNames from 'classnames';
import { Autoplay } from 'swiper';
import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';

const Card = (props: CardProps) => {
  const swiperRef = useRef<SwiperRef>(null);
  useEffect(() => {
    if (swiperRef?.current?.swiper) {
      swiperRef.current.swiper.autoplay.start();
    }
  }, []);
  return (
         <Swiper
          ref={swiperRef}
          direction={'vertical'}
          loop={true}
          slidesPerView={1}
          autoplay={{
            delay: 3000,
          }}
          noSwiping={true}
          noSwipingSelector={`.swiper-slide`}
          modules={[Autoplay]}
          className={classNames(styles.swiper)}
        >
          <SwiperSlide>
            <div>1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div>2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div>3</div>
          </SwiperSlide>
        </Swiper>
  );
};