swiper 横向滚动 一页显示多个，只滚动一个元素，并在中间显示

 js 代码

import React, { useEffect, useRef, useState } from "react";
// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import "./index.less";

export default function App() {
  const [files, $files] = useState<any>([
    { url: 'https://swiperjs.com/demos/images/nature-1.jpg' },
    { url: 'https://swiperjs.com/demos/images/nature-2.jpg' },
    { url: 'https://swiperjs.com/demos/images/nature-3.jpg' },
    { url: "https://swiperjs.com/demos/images/nature-4.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-5.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-6.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-7.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-8.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-9.jpg" },
    { url: "https://swiperjs.com/demos/images/nature-10.jpg" },
  ]);
  //一页显示个数
  const [slidesNum, $slidesNum] = useState<number>(5);
  //获取slidesNum的中位数
  const median = Math.floor(slidesNum/2);
  //选中索引
  let [swiperIndex, $swiperIndex] = useState<number>(3);

  //控制swiper滚动
  const swiperRoll = (index:number) => {
    //获取滚动元素容器
    const mySwiper = document.getElementById('mySwiper');
    const swiperWrapper:any = mySwiper?.getElementsByClassName('swiper-wrapper')[0];
    console.log(swiperWrapper, 'swiperWrapper');
    //获取SwiperSlide元素宽度
    const swiperSlide:any = document.getElementsByClassName('swiperSlide')[0];

    let px = 0;
    if (index<median) {
      px = 0
    } else if (index>=(files.length-median)) {
      px = (files.length-slidesNum) * swiperSlide.offsetWidth;
    } else {
      px = (index-median)*swiperSlide.offsetWidth;
    }
    console.log(px, 'px');
    swiperWrapper.style.transform = `translate3d(-${px}px, 0px, 0px)`;
    swiperWrapper.style.transitionDuration = `300ms`;
  };

  useEffect(() => {
    setTimeout(() => {
      swiperRoll(swiperIndex);
    }, 200);
  }, []);

  return (
    <div className="page">
      <div className="swiperBox" >
        <Swiper
          spaceBetween={0}
          draggable={false}
          modules={[FreeMode, Navigation, Thumbs]}
          //slides数量不足居中显示
          centerInsufficientSlides
          //默认选中
          initialSlide={swiperIndex}
          //一页显示个数
          slidesPerView={slidesNum}
          className="mySwiper"
          id="mySwiper"
        >
          {files.map((v: { url: string }, idx:number) => (
            <SwiperSlide key={idx} className={`swiperSlide ${idx===swiperIndex?'slideActive':''}`}>
              <div className={`swiperSlideBox`} onClick={() => {
                $swiperIndex(idx);
                swiperRoll(idx);
              }}>
                <img src={v.url} />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className="footer">
        <div onClick={() => {
          if (swiperIndex<=0) return;
          swiperIndex-=1;
          $swiperIndex(swiperIndex);
          swiperRoll(swiperIndex);
        }}>上一页</div>
        <div onClick={() => {
          if (swiperIndex>=files.length-1) return;
          swiperIndex+=1;
          $swiperIndex(swiperIndex);
          swiperRoll(swiperIndex);
        }}>下一页</div>
      </div>
    </div>
  );
}

　　

css代码

.page {
  position: relative;
  .swiperBox {
    width: 900px;
    height: 600px;
    margin: auto;
    .mySwiper {
      width: 100%;
      height: 300px;
      .swiper-slide {
        height: 100%;
        opacity: 0.4;
        .swiperSlideBox {
          border: 3px solid #ededed;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .slideActive {
        opacity: 1;
        .swiperSlideBox {
          border: 3px solid #1989fa;
        }
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 10;
    div {
      margin: 0 10px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}