1、版本

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

2、引入swiper

import { Navigation,Pagination} from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper-bundle.css';

注：因为插件包原因，引入方式也不一样，如有报错，请看swiper安插包内容。（此处引入与网官有出入）

3、页面代码

js代码

onSetTransition = (swiper,transition) => {
        for (let i = 0; i < swiper.slides.length; i++) {
            let slide = swiper.slides.eq(i)
            slide.transition(transition);
        }
}

onProgress = (swiper, progress) => {
        for(let i = 0; i < swiper.slides.length; i++){
            let slide = swiper.slides.eq(i);
            let slideProgress = swiper.slides[i].progress
            let modify = 1;
            if (Math.abs(slideProgress) > 1) {
               modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            let translate = slideProgress * modify * 319 + 'px';
            let scale = 1 - Math.abs(slideProgress) / 5;
            let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0);
            }
        }
}


 <div id="certify">
        <div className="swiper-container">
                <Swiper
                                key={systemData.length}
                                className="swiper-wrapper"
                                loop={true} //循环切换
                                watchSlidesProgress={true}  //Progress（进度、进程）分为swiper的progress 和每个slide单独的progress。
                                loopedSlides={5} //可视slide有3个，loopedSlides可设为5个或以上
                                slidesPerView={'auto'}
                                pagination={{ clickable: true }} //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
                                navigation={true} //前后进退按纽
                                centeredSlides={true} //设定为true时，active slide会居中，而不是默认状态下的居左。
                                initialSlide={Math.floor(systemData.length/2)} //与centeredSlide结合使用，指定初始化的索引
                                modules={[Navigation,Pagination]}
                                onProgress={this.onProgress} //回调函数，当Swiper的progress被改变时执行。接受swiper实例和此Swiper的progress作为参数（返回值范围一般在0-1）。
                                onSetTransition={this.onSetTransition} //回调函数，每当设置Swiper开始过渡动画时执行。transtion获取到的是Swiper的speed值。


                                >
                               {systemData.map(item => {
                                   return (
                                    <SwiperSlide key={item.course_id} className="swiper-slide">
                                    {/* <div className="swiper-slide"> */}
                                       <img src={item.course_img} alt="" key={item.course_id} onClick={() => {this.gotoDetails(item.course_id)}}/>
                                       <div className="swiper-title">{item.course_name}</div>
                                       <div className="swiper-askr"></div>
                                   {/* </div> */}
                                   </SwiperSlide>
                                   )
                               })}
                   </Swiper>
         </div>
 </div>

注：在react中，用了centeredSlides(设定为true时，active slide会居中，而不是默认状态下的居左。)属性时，一定要指定设定初始化时slide的索引，两位结合使用。要不，centeredSlides：true就会失效，会为默认状态居左。
scss代码

// 轮播图样式
    #certify{
        position: relative;
        width: 100%;
        /* width: 1200px; */
        width: 1210px;
        height: 530px;
        // height: 602px;
        margin: 0 auto;
        overflow: hidden;
        }
        #certify .swiper-slide {
        /* width: 520px;
        height: 408px; */
        width: 660px;
        // height: 410px;
        height: 468px;
        background: #fff;
        box-shadow: 0 8px 30px #ddd;
        font-size: 18px;
        transition: 300ms;
        border-radius: 16px;
        overflow: hidden;
        margin-bottom: 30px;
        position: relative;
    }
    .swiper-title{
        height: 60px;
        width: 100%;
        color: #333333;
        font-size: 19px;
        line-height: 60px;
        padding-left: 32px;
    }
    #certify .swiper-slide img{
        width: 660px;
        height: 410px;
        overflow: hidden;
    }
    
    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background: rgba(255, 255, 255) ;
        opacity: 1 !important;
    }
    .swiper-pagination-bullet-active{
        width: 31px;
        height: 10px;
        background: linear-gradient(-90deg, #5FCDFB 0%, #1DAFED 100%);
        border-radius: 5px;
    }
    .swiper-slide-active {
        cursor: pointer;
        .swiper-askr{
            display: none !important;
        }
    }
    .swiper-slide{
        .swiper-askr{
            display: block;
        }
    }
    .swiper-askr{
        position: absolute;
        background: rgba(0, 0, 0, .4);
        width: 660px;
        height: 468px;
        top: 0;
        left: 0;
    }
    .swiper-button-prev,.swiper-button-next{
        width: 52px;
        height: 52px;
        background: #000000;
        opacity: 0.6;
        border-radius: 50%;
    }
    .swiper-button-prev{
        left: 26px;
    }
    .swiper-button-next{
        right: 26px;
    }
    .swiper-button-next:after,.swiper-button-prev:after{
        color: #fff !important;
        transform: scale(0.4);
    }
    .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
        margin: 0 7px;
        cursor: pointer;
    }
    
}

4、效果如下

image.png