Use swiper7 in react to deal with swiper vertical display problem

Some of the old versions on the Internet are used, and the usage may be different. Post the latest version first.

Version

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

Install

yarn add swiper

renderings

horizontal effect

vertical effect

used in the page

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>

style

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

full version

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;