React（Bootstrap）项目中Swiper配置断点后页面加载时slide尺寸异常求助

我在React项目中使用Swiper React轮播组件。
据我所知，我无法通过Bootstrap控制每页展示幻灯片数（slides per view）属性，如果可以的话我会直接创建所需列容器，将swiper slide放入列中即可。
因此我改用Swiper JS自带的断点（breakpoints）配置，断点功能本身运行正常，每页展示幻灯片数可以按要求适配调整，但页面加载时slide会先以100%宽度展示，之后才收缩到正确尺寸，造成了非常差的体验。
如果有人知道如何修复这个问题我将不胜感激。

你遇到的加载闪跳问题是Swiper初始化逻辑和Gatsby的静态生成特性不同步导致的，可按以下步骤修复：

• 给Swiper组件添加根级slidesPerView默认值，同时简化断点配置（Swiper的breakpoints键本身就是宽度阈值，无需内部重复声明width属性）
• 新增客户端渲染判断，等页面 hydration 完成后再渲染Swiper组件，避免服务端输出和客户端初始渲染内容不一致
• 可额外添加全局CSS规则，在Swiper初始化前就限定幻灯片宽度，进一步避免闪跳

修改后的完整代码 #

import { useState, useEffect } from 'react'
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

import { Container } from 'react-bootstrap';

import ProjectImage from "../images/project-image.jpg"

// 引入Swiper核心和所需模块
import { Pagination, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

// 引入Swiper样式
import 'swiper/css';
import 'swiper/css/pagination';

const IndexPage = () => {
  // 客户端渲染标记，适配Gatsby静态生成特性
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)
  }, [])

  return (
    <Layout>
      <Seo title="首页" />
      <Container className="py-5">
        {/* 仅在客户端渲染Swiper */}
        {isClient && (
          <Swiper
            modules={[Pagination, A11y]}
            spaceBetween={50}
            // 添加根级默认值，和最小断点配置保持一致
            slidesPerView={1}
            breakpoints={{
              768: {
                slidesPerView: 2,
              },
              1200: {
                slidesPerView: 3,
              },
            }}
            pagination={{ clickable: true }}
            onSwiper={(swiper) => console.log(swiper)}
            onSlideChange={() => console.log('slide change')}
          >
            <SwiperSlide>
              <div className="card chosen-project">
                <img src={ProjectImage} className="card-img-top" alt="项目图片"/>
                <div className="card-body">
                  <h5 className="card-title mt-2">Lorem Ipsum</h5>
                  <p className="card-text mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <div className="mt-4 mb-2">
                    <span className="badge rounded-pill">Lorem</span>
                    <span className="badge rounded-pill">Ipsum</span>
                  </div>
                </div>
                <div className="card-footer bg-white">
                  <a href="#" className="card-link muted">安装包</a>
                  <a href="#" className="card-link">源码</a>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
            <SwiperSlide>Slide 5</SwiperSlide>
            <SwiperSlide>Slide 6</SwiperSlide>
            ...
          </Swiper>
        )}
      </Container>
    </Layout>
  )
}

export default IndexPage

可选补充全局CSS #

如果还有闪跳问题，可将以下代码加入全局样式文件，提前匹配Swiper的断点规则：

/* 768px以上适配2列 */
@media (min-width: 768px) {
  .swiper-slide {
    width: calc((100% - 50px) / 2) !important;
  }
}
/* 1200px以上适配3列 */
@media (min-width: 1200px) {
  .swiper-slide {
    width: calc((100% - 100px) / 3) !important;
  }
}

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