轮播图-实现中间大两边小的轮播图

import SwiperCore, {Pagination} from 'swiper';
import {Swiper, SwiperSlide} from "swiper/react";
import "swiper/swiper.less";
import "swiper/swiper-bundle.min";
import "swiper/swiper-bundle.min.css";

<Swiper
  spaceBetween={-60}//幻灯片之间的距离
  slidesPerView={3} //视图幻灯片数量
  centeredSlides={true} //活动幻灯片将居中
  loop={true} // 是否循环
  className={'mySwiper2'}
>
  {imgDataFour.map((e, i) => {
    return (
      <SwiperSlide key={i}>
        <img src={e} alt={e}/>
      </SwiperSlide>
    );
  })}
</Swiper>

css样式

.mySwiper2 {
  position: relative;
  width: 100%;
  height: 350px;

  .swiper-slide {
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
    transform: scale(0.8);
  }

  .swiper-slide-active, .swiper-slide-duplicate-active {
    transform: scale(1.1);
    z-index: 999;
  }
}