react中使用swiper6上下自动轮播

在React中使用Swiper v6实现上下自动轮播，首先你需要安装Swiper库以及相关的依赖。你可以通过npm或yarn来安装：

npm install swiper react-swiper @swipe/react
# 或者
yarn add swiper react-swiper @swipe/react

然后，在组件里导入Swiper并配置自动轮播功能。这里是一个简单的例子：

import React from 'react';
import { Swiper, Slide } from '@swiper/react';

const AutoSlideSwiper = () => {
  const swiperOptions = {
    direction: 'vertical', // 设置方向为垂直
    loop: true, // 开启循环模式
    autoplay: {
      disableOnInteraction: false,
      delay: 3000, // 自动切换时间间隔（毫秒）
    },
    // 其他选项...
  };

  return (
    <Swiper {...swiperOptions}>
      {/* 添加滑动项 */}
      <Slide>Slide 1</Slide>
      <Slide>Slide 2</Slide>
      <Slide>Slide 3</Slide>
      {/* ... */}
    </Swiper>
  );
};

export default AutoSlideSwiper;

在这个例子中，`autoplay`属性用于设置自动轮播，`disableOnInteraction`则允许用户交互停止自动滚动。每过设定的时间（delay），Swiper会自动切换到下一张幻灯片。