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';

<div className='gdswiper2w'>
  <Swiper
    className='gdswiper2'
    modules={[Navigation, Pagination]}
    spaceBetween={10} // slide间隔
    slidesPerView={3} // 一行几个
    direction='vertical' // 方向
    loop='true'
    onSlideChange={() => 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) => (
      <SwiperSlide key={i} >{item}</SwiperSlide>
    ))}
  </Swiper>
  <div className="swbtn swbtn1"></div>
  <div className="swbtn swbtn2"></div>
</div>

样式

.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 (
    <div>
      <Header></Header>
      <div className={styles.swiper_page}>
        <h1>测试文件</h1>
        <div className='gdswiper2w'>
          <Swiper
            className='gdswiper2'
            modules={[Navigation, Pagination]}
            spaceBetween={10} // slide间隔
            slidesPerView={3} // 一行几个
            direction='vertical' // 方向
            loop='true'
            onSlideChange={() => 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) => (
              <SwiperSlide key={i} >{item}</SwiperSlide>
            ))}
          </Swiper>
          <div className="swbtn swbtn1"></div>
          <div className="swbtn swbtn2"></div>
        </div>

      </div>
    </div>
  )
}

export default Test;