如何在同一页面配置多个带不同自动播放速度的SwiperJS实例？

你的问题核心是没有为每个滑块单独初始化配置——当前代码直接给所有.swiper元素套用同一个speed值（最后一次赋值的结果），自然所有滑块都会继承最后一个的速度。

修正方案：遍历每个滑块单独初始化 #

通过遍历页面上的每个.swiper元素，为每个元素单独读取自身的data-speed属性，再初始化对应的Swiper实例：

// 遍历每个.swiper滑块元素
$(".swiper").each(function() {
  // 获取当前滑块自身的data-speed值
  var speed = $(this).data("speed");
  // 针对当前滑块单独初始化Swiper
  new Swiper(this, {
    modules: [Autoplay],
    loop: true,
    autoplay: {
      delay: speed, // 现在使用的是当前滑块专属的速度值
      disableOnInteraction: false,
    },
  });
});

关键改动说明 #

• 用$(".swiper").each()遍历每个滑块，回调里的this就是当前正在处理的那个滑块DOM节点
• 在遍历内部获取$(this).data("speed")，确保拿到的是当前滑块自己的速度配置
• 初始化Swiper时，第一个参数传this（当前滑块元素），而不是全局的.swiper选择器，保证每个实例只绑定到对应的滑块上

这样每个滑块就会使用自己data-speed定义的自动播放速度，不会再互相干扰。

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