如何让两个SwiperJS滑块共存？第二个滑块无法正常工作

实现两个SwiperJS滑块协同工作时遇到初始化脚本冲突：将其中一个滑块的初始化代码加入另一个的Codepen脚本栏后，对应滑块失效。第二个滑块已通过#swiper1指定唯一ID，排除了类名冲突；Slider1运行正常，需保留其每页显示幻灯片数量的设置。

Slider2的初始化代码如下：

(function () {
  'use strict';
  const mySwiper = new Swiper('#swiper1', {
    loop: true,
    autoplay: 4000,
    slidesPerView: '1',
    centeredSlides: true,

    a11y: true,
    keyboardControl: true,
    grabCursor: true,

    // pagination
    pagination: '.swiper-pagination',
    paginationClickable: true,

    // navigation arrows
    nextButton: '#js-prev1',
    prevButton: '#js-next1'
  });
})(); 

两个滑块的Codepen标识：Slider1（jOzdwbG）、Slider2（gOeqYLV）

1. 修复变量名冲突 #

两个滑块初始化时大概率使用了相同的变量名（比如都用mySwiper），导致后初始化的实例覆盖前一个。给每个滑块实例分配唯一变量名即可：

// Slider1初始化（保留原有配置）
const swiperMain = new Swiper('#你的Slider1容器ID', {
  // 原Slider1的配置，比如slidesPerView: 3等
  // ...其他配置项
});

// Slider2初始化
const swiperSecondary = new Swiper('#swiper1', {
  // 原Slider2的配置
  loop: true,
  autoplay: 4000,
  slidesPerView: '1',
  centeredSlides: true,
  a11y: true,
  keyboardControl: true,
  grabCursor: true,
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '#js-prev1',
  prevButton: '#js-next1'
});

2. 确保选择器全局唯一 #

虽然Slider2用了#swiper1作为容器ID，但分页器、导航按钮的选择器可能和Slider1重复：

• 给Slider2的分页器添加唯一ID（比如#swiper1-pagination），然后将初始化代码里的pagination: '.swiper-pagination'改为pagination: '#swiper1-pagination'
• 确认Slider2的导航按钮#js-prev1、#js-next1没有被Slider1使用，若重复则修改为唯一ID

3. 统一Swiper版本 #

检查两个Codepen中引入的SwiperJS版本是否一致：

• 旧版本Swiper的autoplay接受数字参数，新版本要求是对象格式（autoplay: { delay: 4000 }）
• 旧版本的keyboardControl在新版本中改为keyboard: true
• 旧版本的nextButton/prevButton在新版本中需放在navigation对象内（navigation: { nextEl: '#js-next1', prevEl: '#js-prev1' }）
  版本不匹配会导致滑块初始化失败，统一使用同一版本即可解决。

4. 确保DOM加载完成后初始化 #

将两个滑块的初始化代码放在DOMContentLoaded事件监听中，避免DOM元素未加载就执行初始化：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放置两个滑块的初始化代码
});

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