ReactJS使用Swiper实现2行4列轮播时单元格宽度异常求助

我尝试用Swiper创建一个2行4列的轮播组件，但遇到了单元格宽度无限扩张的异常，轮播组件整体无限延伸。我的代码和官网示例基本一致，预期是正常的2行4列布局，实际效果完全不符合预期。

我的实现代码 #

React组件代码

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
 
// Import Swiper styles
import "swiper/css";
import "swiper/css/grid";
import "swiper/css/pagination";
 
import "./carousel.scss";
 
// import required modules
import { Grid, Pagination } from "swiper";
 
export default function Carousel() {
    return (
        <>
            <Swiper
                slidesPerView={3}
                grid={{
                    rows: 2,
                }}
                spaceBetween={30}
                modules={[Grid, Pagination]}
                className="mySwiper"
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>
                <SwiperSlide>Slide 5</SwiperSlide>
            </Swiper>
        </>
    );
}

CSS样式代码

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
 
.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
 
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  height: calc((100% - 30px) / 2) !important;
}

问题原因与解决方案 #

1. 参数与预期布局不匹配

你设置了slidesPerView={3}，但预期是每行4列，首先要将该参数修改为4，匹配目标布局。

2. 容器高度缺失导致尺寸计算异常

.swiper类设置的height: 100%没有父容器高度限制，会导致Swiper无法正确计算单元格的宽高比例，进而引发宽度无限扩张的问题。同时，.swiper-slide中强制设置的!important高度会干扰Grid模块的自动布局逻辑。

修正后的代码

调整后的Swiper配置

<Swiper
    slidesPerView={4} // 改为每行4列
    grid={{
        rows: 2,
    }}
    spaceBetween={30}
    modules={[Grid, Pagination]}
    className="mySwiper"
>
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
    <SwiperSlide>Slide 6</SwiperSlide>
    <SwiperSlide>Slide 7</SwiperSlide>
    <SwiperSlide>Slide 8</SwiperSlide>
</Swiper>

修正后的CSS

.swiper {
  width: 100%;
  height: 400px; /* 设置固定高度，让Swiper有明确的尺寸基准 */
  margin-left: auto;
  margin-right: auto;
}
 
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* 移除强制高度，由Grid模块自动分配行高 */
  display: flex;
  align-items: center;
  justify-content: center; /* 让内容居中显示 */
}

额外优化建议

• 若需要响应式布局，可通过breakpoints参数适配不同屏幕：

  breakpoints={{
    640: { slidesPerView: 2 },
    768: { slidesPerView: 3 },
    1024: { slidesPerView: 4 }
  }}
  

• 确保使用的Swiper版本与官方示例一致，避免API差异导致的兼容问题。

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