多款React轮播库使用时非首屏轮播项无法正常显示问题求助

解决方案 #

多款轮播库均复现问题说明故障点不在轮播库本身，99%为父容器样式/全局样式冲突导致，按优先级依次尝试以下操作即可解决：

1. 给父容器添加明确宽高基准
   你当前的.page容器未设置明确宽高，swiper的width: 50%/height: 50%是相对父元素生效的，父元素无基准宽高时会导致swiper可视区域计算异常，修改SCSS：

.page{
    display: flex;
    align-items: center;
    justify-content: center;
    // 明确设置父容器占满当前视口，可根据业务需求调整
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

2. 禁止轮播项自动收缩
   很多项目的全局重置样式会默认给所有元素设置flex-shrink: 1，会导致不在第一屏的轮播项被挤压到宽度为0，修改SCSS：

.swiper-container{
    width: 50%;
    height: 400px; // 可直接设置固定高度测试，避免百分比高度继承异常
    border: solid black;

    .swiper-slide{
        border: solid red;
        flex-shrink: 0; // 禁止轮播项收缩
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

3. 修正Swiper组件配置
   你导入了导航、分页模块但未传入组件，同时调整导入路径为官方推荐写法，避免版本兼容问题：

// 修正react组件导入路径
import { Swiper, SwiperSlide } from 'swiper/react';

// 给Swiper组件新增modules配置
<Swiper
  className="swiper-container"
  modules={[Navigation, Pagination]} // 新增该行，传入依赖模块
  spaceBetween={50}
  slidesPerView={3}
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}
>

4. 排查全局样式冲突
   检查全局样式文件是否对通用标签、轮播类名设置了overflow: hidden、transform、opacity等影响渲染的属性，重点排查swiper父级链上的元素是否有异常溢出隐藏配置，导致超出第一屏的轮播项被截断。

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