Swiper.js轮播无法正常循环 新手作品集网站求助

问题根源 #

你的轮播无法循环主要有两个核心问题：

1. cssMode 与 loop 功能冲突：Swiper 的 cssMode: true 基于原生 CSS 滚动实现，而 loop 无缝循环需要通过 JS 克隆 slide 并控制动画逻辑，两者无法兼容共存。
2. 重复配置 autoplay：代码中先后设置了 autoplay: { delay: 5000 } 和 autoplay: true，后者会直接覆盖前者的详细配置，可能导致自动播放行为异常。

修复步骤 #

1. 调整 Swiper 初始化配置 #

移除 cssMode: true，并合并 autoplay 配置，保留完整的自动播放参数：

let swiperPortfolio = new Swiper('.portfolio__container', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  autoplay: {
    delay: 5000,
    disableOnInteraction: false, // 可选：用户交互后继续自动播放
  },
  mousewheel: true,
  keyboard: true,
});

2. 修正容器溢出样式 #

将容器的 overflow 设置为 hidden，确保克隆的 slide 不会暴露在容器外部，影响循环视觉效果：

.portfolio__container {
  overflow: hidden;
  overflow-wrap: break-word;
}

3. 确认 HTML 结构 #

你的 HTML 结构完全符合 Swiper 规范（swiper-wrapper 包裹 swiper-slide），无需调整。

修改完成后，轮播即可实现无缝循环，同时自动播放会按照设定的5秒间隔正常运行。

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