react中使用swiper7 react中处理swiper垂直显示问题

网上有些使用的是老版本，用法可能不同，先贴出最新版

版本

"react": "17.0.2",
"swiper": "^7.4.1"

安装

yarn add swiper

效果图

横向效果

垂直效果

页面中使用

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';


   console.log('slide change')}
    onSwiper={(swiper) => console.log(swiper)}
    navigation={{
      nextEl: '.swbtn1',
      prevEl: '.swbtn2',
      disabledClass: 'disable' // 当导航按钮变为不可用时添加的class,也就是当swiper索引为0时上一张没有prevEl的class类名就会添加一个disable，也就是.swiper-button-prev .disable
    }}
  >
    {[1, 2, 3, 4, 5, 6, 7, 8].map((item, i) => (
      {item}
    ))}
  
  

  

样式

.gdswiper2w{
  position: relative;
  width: 300px;
  height: 602px;
  border: 1px solid ;
  margin: auto;
}
/* 重要：不设置宽高会出错 */
.gdswiper2w .gdswiper2,
.gdswiper2w .gdswiper2 .swiper-wrapper{
  width: 300px;
  height: 602px;
}
.gdswiper2 .swiper-slide{
  width: 100%;
  background: pink;
}
.gdswiper2w .swbtn{
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
  z-index: 10;
  left: 50%;
  transform: translate(-50%);
}
.gdswiper2w .swbtn1{
  top: -40px;
}
.gdswiper2w .swbtn2{
  bottom: -40px;
}

完整版

import { useState, useEffect } from 'react'
import Header from './header'
import styles from './test.module.scss'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const Test = props => {
  return (
    

      

      

        
测试文件
        

           console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
            navigation={{
              nextEl: '.swbtn1',
              prevEl: '.swbtn2',
              disabledClass: 'disable' // 当导航按钮变为不可用时添加的class,也就是当swiper索引为0时上一张没有prevEl的class类名就会添加一个disable，也就是.swiper-button-prev .disable
            }}
          >
            {[1, 2, 3, 4, 5, 6, 7, 8].map((item, i) => (
              {item}
            ))}
          
          

          

        

      
    
  )
}

export default Test;