如何在React项目中为Swiper设置固定数量的可见幻灯片？

问题根源与修复步骤 #

1. 修正slidesPerView的错误写法
   你当前用的slidesPerView={{number:3}}是错误语法，Swiper中固定显示3张幻灯片直接传数字即可；如果需要响应式断点适配，才用对象格式（比如{xs:1, sm:2, md:3}）。把配置改成：

slidesPerView={3}

2. Coverflow效果下补充必要配置
   开启centeredSlides={true}后，必须配合spaceBetween控制幻灯片间距，否则会出现重叠或显示数量不符的问题，同时可以调整coverflowEffect参数优化显示：

spaceBetween={30} // 可根据视觉需求调整间距
coverflowEffect={{
  rotate: 0,
  stretch: 50, // 适当拉伸让侧边幻灯片更紧凑
  depth: 100,
  modifier: 2,
  slideShadows: false, // 关闭阴影避免遮挡
}}

3. 移除CSS中固定幻灯片宽度的限制
   你给.swiper-slide设置了固定width:37rem，这会完全覆盖Swiper根据slidesPerView计算的宽度，导致设置失效。修改样式如下：

.swiper-slide {
  /* 去掉固定width，改用max-width限制最大宽度 */
  max-width: 37rem;
  height: 42rem;
  position: relative;
}

.swiper-slide img {
  width: 100%; /* 改成100%自适应父容器 */
  height: 42rem;
  border-radius: 2rem;
  object-fit: cover;
}

/* 移动端媒体查询同步修改 */
@media (max-width: 500px) {
  .swiper_container {
    height: 47rem;
  }
  .swiper-slide {
    max-width: 28rem !important;
    height: 36rem !important;
  }
  .swiper-slide img {
    height: 36rem !important;
  }
}

4. 删除重复渲染的幻灯片
   你代码里连续调用了两次{renderSlides()}，会导致幻灯片数量翻倍，loop模式下可能出现异常，保留一次即可：

{renderSlides()}

嵌入网站容器的注意事项 #

如果要把这个Swiper嵌入到网站的某个容器中：

• 确保父容器不要设置固定宽度或overflow:hidden（除非需要裁剪），让Swiper自适应父容器宽度
• 若父容器有padding，给.swiper_container添加对应margin或调整padding，避免内容挤压
• 可根据父容器尺寸用响应式断点配置slidesPerView，示例：

slidesPerView={{
  0: 1,    // 屏幕宽度<0px时显示1张
  768: 2,  // 屏幕宽度≥768px时显示2张
  1024: 3  // 屏幕宽度≥1024px时显示3张
}}

修改后的完整JSX示例 #

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

import { EffectCoverflow, Pagination, Navigation } from 'swiper';

import slide_image_1 from './assets/images/img_1.jpg';
import slide_image_2 from './assets/images/img_2.jpg';
import slide_image_3 from './assets/images/img_3.jpg';
import slide_image_4 from './assets/images/img_4.jpg';
import slide_image_5 from './assets/images/img_5.jpg';
import slide_image_6 from './assets/images/img_6.jpg';
import slide_image_7 from './assets/images/img_7.jpg';

function App() {

  const slides = [
    slide_image_1,
    slide_image_2,
    slide_image_3,
    slide_image_4,
    slide_image_5,
    slide_image_6,
    slide_image_7,
  ];

  const renderSlides = () =>
    slides.map((slide, index) => (
      <SwiperSlide key={index}>
        <img src={slide} alt={`slide_image_${index}`} />
      </SwiperSlide>
    ));

  return (
    <div className="container">
      <Swiper
        effect={'coverflow'}
        grabCursor={true}
        slideToClickedSlide={true}
        centeredSlides={true}
        loop={true}
        slidesPerView={3}
        spaceBetween={30}
        coverflowEffect={{
          rotate: 0,
          stretch: 50,
          depth: 100,
          modifier: 2,
          slideShadows: false,
        }}
        modules={[EffectCoverflow, Pagination, Navigation]}
        className="swiper_container"
      >
        {renderSlides()}
        <div className="slider-controler"></div>
      </Swiper>
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Ayakul