使用Stimulus集成Swiper JS时自动播放失效，如何修复？

在HTML页面中使用Swiper JS创建轮播组件，页面显示正常，但自动播放功能失效，仅能手动滑动。相关代码如下：

HTML结构 #

<div class="swiper">
    <div class="swiper-wrapper">
        <a class="swiper-slide" href="#"><img src="../src/images/1.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/2.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/3.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/4.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/5.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/6.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/7.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/8.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/9.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/10.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/11.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/12.svg"></a>
    </div>
</div>

Stimulus控制器代码 #

'use strict';
import { Controller } from '@hotwired/stimulus';
import Swiper from 'swiper';
import 'swiper/css';

export default class extends Controller {
    connect() {
        const swiper = new Swiper('.swiper', {
            loop: true,
            slidesPerView: 8,
            spaceBetween: 30,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
        });
    }
}

针对自动播放失效的问题，可按以下步骤排查修复：

• 导入并注册Autoplay模块
  Swiper 6+版本中Autoplay是独立模块，默认不包含在核心包内。需手动导入并注册：

  'use strict';
  import { Controller } from '@hotwired/stimulus';
  import Swiper from 'swiper';
  import { Autoplay } from 'swiper/modules'; // 新增导入Autoplay模块
  import 'swiper/css';
  import 'swiper/css/autoplay'; // 可选：导入Autoplay相关样式
  
  export default class extends Controller {
      connect() {
          const swiper = new Swiper('.swiper', {
              modules: [Autoplay], // 注册Autoplay模块
              loop: true,
              slidesPerView: 8,
              spaceBetween: 30,
              autoplay: {
                  delay: 5000,
                  disableOnInteraction: false
              }
          });
      }
  }
  

• 确保轮播容器有明确尺寸
  如果.swiper容器未设置宽度，可能导致Autoplay逻辑无法触发。添加基础样式：

  .swiper {
      width: 100%;
      min-width: 800px; /* 根据页面布局调整 */
  }
  

• 避免重复初始化冲突
  检查页面是否存在多个.swiper元素，或控制器被重复绑定。建议给容器添加唯一ID，用ID选择器初始化：

  <div id="carousel-swiper" class="swiper">...</div>
  

  JS中修改选择器：

  const swiper = new Swiper('#carousel-swiper', { ... });
  

• 修正配置语法问题
  移除autoplay对象末尾的多余逗号（部分严格模式环境会因此报错）：

  autoplay: {
      delay: 5000,
      disableOnInteraction: false
  }
  

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