Swiper.js幻灯片宽度计算异常求助（v9.0.2）

问题分析 #

需要实现每张幻灯片宽度固定675px，超出页面右侧可滑动，但设置硬编码宽度后，slidesPerView={1}仅能单张切换，slidesPerView={'auto'}也无法正常计算宽度，达不到预期的多卡片并排、可滑动效果。

解决方案 #

1. 调整Swiper核心配置 #

在Swiper组件中添加freeMode: true，同时保留slidesPerView='auto'和spaceBetween，让Swiper允许自由滑动并自动识别幻灯片宽度：

<Swiper
  slidesPerView={'auto'}
  spaceBetween={20}
  freeMode={true} // 开启自由滑动模式，让Swiper正确识别自定义宽度
  onSlideChange={() => console.log("slide change")}
  onSwiper={(swiper) => console.log(swiper)}
>
  {projects.map((project) => (
    <SwiperSlide key={project.id}> {/* 添加key避免React渲染警告 */}
      <Project project={project} />
    </SwiperSlide>
  ))}
</Swiper>

2. 修正CSS样式冲突 #

• 移除.project中的&:not(:last-child) {margin-left: rem(20);}，因为Swiper的spaceBetween已经负责控制幻灯片间距，手动加margin会导致宽度计算错误。
• 移除.project的margin: 0 auto，避免居中布局干扰Swiper的横向排列逻辑。
• 给.swiper-slide添加display: inline-block，确保Swiper能正确读取幻灯片的自定义宽度：

.swiper-slide {
  display: inline-block;
}

.project {
  display: block;
  margin: 0;
  &__link {
    display: block;
    width: 675px;
    height: rem(600);
    background: red;
  }
  // 移除以下冲突样式
  // &:not(:last-child) { margin-left: rem(20); }
}

3. 动态内容适配（可选） #

如果项目列表是异步加载的，需在数据加载完成后更新Swiper实例，确保宽度计算准确：

import { useEffect, useRef } from 'react';

const swiperRef = useRef(null);

useEffect(() => {
  if (swiperRef.current) {
    swiperRef.current.update();
  }
}, [projects]);

// 绑定ref到Swiper组件
<Swiper
  ref={swiperRef}
  // 其他配置项...
>

效果说明 #

修改后，Swiper会自动识别每张675px的幻灯片宽度，结合freeMode: true实现多张卡片并排显示，超出页面部分可自由滑动，完全匹配预期效果。

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