Swiper.js窗口调整时断点不生效，刷新后恢复正常

问题场景 #

配置Swiper断点后，初始加载（1200px分辨率）功能正常，但窗口缩小至移动端尺寸（如500px）时，轮播无法滑动，刷新页面后滑动功能恢复。

核心原因 #

窗口尺寸变化时，Swiper未正确重新计算滑动参数（尤其在使用slidesPerView: 'auto'的断点场景下），导致实例状态与当前窗口不匹配。

解决方案 #

1. 监听resize事件，手动更新Swiper实例

通过useRef获取Swiper实例，在窗口resize时调用update()方法强制更新：

import { useRef, useEffect } from 'react';
import Swiper from 'swiper';

const ArtistSwiper = () => {
  const swiperRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      swiperRef.current?.update();
      // 若update无效，可尝试销毁后重新初始化
      // if (swiperRef.current) {
      //   swiperRef.current.destroy();
      //   swiperRef.current = new Swiper('.swiper-artists', { /* 你的完整配置 */ });
      // }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <Swiper
      ref={swiperRef}
      slidesPerView={5}
      breakpoints={{
        1200: {
          slidesPerView: 5,
          spaceBetween: 5
        },
        992: {
          slidesPerView: 'auto',
          spaceBetween: 12
        },
        300: {
          slidesPerView: 'auto',
          spaceBetween: 30
        }
      }}
      className={style['swiper-artists']}
    >
      {/* 轮播内容 */}
    </Swiper>
  );
};

2. 优化断点配置

移除1200断点中的width: 1200配置，避免锁定Swiper容器宽度导致无法自适应：

breakpoints={{
  1200: {
    slidesPerView: 5,
    spaceBetween: 5
  },
  992: {
    slidesPerView: 'auto',
    spaceBetween: 12
  },
  300: {
    slidesPerView: 'auto',
    spaceBetween: 30
  }
}}

注：Swiper断点默认基于最小宽度触发，确保断点数值从大到小排列（已符合你的配置）。

3. 检查样式冲突

确认移动端下.swiper-slide的布局未被自定义样式破坏，确保Swiper能正确计算滑动区域的宽度和间距。

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