如何根据窗口尺寸自动调整Swiper滑块的slidesPerView参数？

问题描述 #

我需要在窗口尺寸较小时将slidesPerView设为1，窗口变大时自动改为3，但当前代码仅在页面刷新时生效，窗口尺寸变化时无法自动调整，请问该怎么解决？

原Swiper代码：

if(window.innerWidth>768){
  var swiper = new Swiper(".productSwiper", {
    slidesPerView: 3,
    spaceBetween: 30
  });
}else{
  var swiper = new Swiper(".productSwiper", {
    slidesPerView: 1
  });
}

原HTML代码：

<div class="swiper productSwiper my-5">
        <div class="swiper-wrapper col-6 col-md-5 col-lg-3">

            <div class="swiper-slide card" style="width: 18rem;">

                <div class="d-flex justify-content-center">
                    <img src="static/1_medicine/2.jpg" class="card-img-top product_img d-block py-3" alt="product image 1">
                </div>
            
            </div>
        </div>
    </div>

问题原因 #

你的代码仅在页面初始化时执行了一次窗口宽度判断并创建Swiper实例，窗口尺寸变化时没有触发任何更新逻辑，因此无法自动调整slidesPerView参数。

解决方案 #

方案一：使用Swiper内置响应式断点配置（推荐）

Swiper原生支持响应式断点配置，可直接根据不同屏幕宽度设置参数，无需手动监听窗口变化，这是官方推荐的实现方式。

修改后的代码：

var swiper = new Swiper(".productSwiper", {
  // 默认适配小屏的参数
  slidesPerView: 1,
  // 断点配置：当屏幕宽度≥768px时应用以下参数
  breakpoints: {
    768: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
});

• breakpoints中的数值为最小宽度阈值，当窗口宽度达到或超过该值时，对应的配置会覆盖默认参数
• 该方式会自动监听窗口尺寸变化，无需额外编写事件处理逻辑，简洁且可靠

方案二：手动监听窗口resize事件（仅作参考）

若需手动实现，可监听resize事件，在窗口尺寸变化时销毁旧实例并重新创建，注意添加防抖避免频繁触发：

let swiper;

function initSwiper() {
  // 销毁已存在的Swiper实例
  if (swiper) {
    swiper.destroy(true, true);
  }
  
  // 根据当前窗口宽度创建新实例
  swiper = new Swiper(".productSwiper", {
    slidesPerView: window.innerWidth > 768 ? 3 : 1,
    spaceBetween: window.innerWidth > 768 ? 30 : 0
  });
}

// 页面初始化时执行
initSwiper();

// 监听窗口resize事件，添加防抖
window.addEventListener('resize', () => {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(initSwiper, 200);
});

• 防抖处理可避免窗口拖动时频繁创建/销毁实例，提升性能
• 该方式比内置断点配置繁琐，且易出现兼容性问题，优先选择方案一

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