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

最新推荐文章于 2024-02-19 17:46:16 发布

阿迪不想上班

最新推荐文章于 2024-02-19 17:46:16 发布

阅读量1.1k

点赞数 2

分类专栏：前端学习文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43916997/article/details/131235721

版权

前端学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>
  );
};