Next.js中Swiper幻灯片宽度计算前全屏显示问题求助

问题代码 #

'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';

export default function Component() {
  const cards = [{ id: 0 }, { id: 1 }, { id: 2 }];
  
  return (
    <Swiper
      slidesPerView={3}
      spaceBetween={30}
      className="mySwiper"
    >
      {cards.map((card) => (
        <SwiperSlide key={card.id}>
          <div className="h-52 bg-gray-400">{card.id}</div>
        </SwiperSlide>
      ))}
    </Swiper>
  )
}

问题描述 #

幻灯片在Swiper完成宽度计算前会显示全屏宽度，几秒后才会调整为预期的3列样式，导致UI出现明显闪烁。尝试过给幻灯片设置固定宽度，但没有效果。

解决方案 #

1. CSS预计算幻灯片宽度（推荐） #

直接用CSS提前算出幻灯片的最终宽度，让初始渲染就和Swiper计算后的样式一致，从根源避免闪烁。

根据slidesPerView={3}和spaceBetween={30}的配置，计算每个幻灯片的宽度：容器总宽度减去2个间距（3个幻灯片之间有2个间隔），再除以3。用CSS变量和calc实现：

.mySwiper {
  --slide-count: 3; /* 和slidesPerView配置值对应 */
  --slide-gap: 30px; /* 和spaceBetween配置值对应 */
}

.mySwiper .swiper-slide {
  width: calc((100% - (var(--slide-count) - 1) * var(--slide-gap)) / var(--slide-count)) !important;
  margin-right: var(--slide-gap) !important;
}

/* 最后一个幻灯片去掉右边距 */
.mySwiper .swiper-slide:last-child {
  margin-right: 0 !important;
}

如果是响应式布局，不同屏幕下slidesPerView有变化，配合媒体查询更新CSS变量即可：

@media (max-width: 768px) {
  .mySwiper {
    --slide-count: 1;
  }
}

2. 初始化完成后再显示容器 #

通过Swiper的初始化回调，先隐藏容器，等计算完成后再显示，彻底避免闪烁：

修改组件代码，添加状态控制显示：

'use client';
import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';

export default function Component() {
  const [isReady, setIsReady] = useState(false);
  const cards = [{ id: 0 }, { id: 1 }, { id: 2 }];
  
  return (
    <div className={`swiper-wrap ${isReady ? '' : 'invisible h-0 overflow-hidden'}`}>
      <Swiper
        slidesPerView={3}
        spaceBetween={30}
        className="mySwiper"
        onInit={() => setIsReady(true)}
      >
        {cards.map((card) => (
          <SwiperSlide key={card.id}>
            <div className="h-52 bg-gray-400">{card.id}</div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  )
}

再添加过渡效果，让显示更自然：

.swiper-wrap {
  transition: all 0.2s ease;
}

3. 针对带图片的幻灯片优化 #

如果幻灯片里包含图片，Swiper可能会因为图片未加载完成导致计算偏差，开启预加载并监听图片加载完成事件：

<Swiper
  slidesPerView={3}
  spaceBetween={30}
  className="mySwiper"
  preloadImages={true}
  updateOnWindowResize={true}
  onImagesReady={() => setIsReady(true)}
>
  {/* 幻灯片内容 */}
</Swiper>

这样能确保Swiper在图片加载完成后再计算宽度，减少因图片尺寸变化导致的闪烁。

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