如何强制Swiper.js在移动端视口下仅显示单个轮播滑块

算力阿峰

2026-10-7

问题原因

你当前的初始化配置层级错误：slidesPerView是Swiper的顶层全局配置项，不属于autoplay的子配置项，所以你写在autoplay内的slidesPerView: 1没有生效，才会出现移动端同时展示多个滑块的问题。

修复方案

方案1：全设备固定单滑块

如果所有设备都只需要展示1个滑块，直接把slidesPerView提到顶层配置即可：

var swiper = new Swiper(".swiper-container", {
  slidesPerView: 1, // 全局配置单滑块展示
  autoplay: {
    disableOnInteraction: false,
  },
});

方案2：响应式适配（移动端单滑块，其他设备可自定义数量）

如果需要不同视口宽度下展示不同数量的滑块，可以使用Swiper自带的断点配置实现自适应：

var swiper = new Swiper(".swiper-container", {
  slidesPerView: 1, // 默认移动端配置：强制单滑块
  autoplay: {
    disableOnInteraction: false,
  },
  breakpoints: {
    // 视口宽度≥768px时的配置，断点数值可根据需求自行调整
    768: {
      slidesPerView: 2, // 示例：平板端展示2个滑块
    },
    // 视口宽度≥1200px时的配置
    1200: {
      slidesPerView: 3, // 示例：桌面端展示3个滑块
    }
  }
});