单页多Swiper滑块失效求助：仅顶部滑块可正常使用

问题原因 #

你的问题出在JS初始化逻辑和导航按钮的关联方式上：

• 直接通过类名初始化Swiper时，只会选中页面中第一个匹配的滑块容器，后续滑块不会被初始化。
• 所有滑块的导航按钮使用了相同的类名（.swiper-button-prev/.swiper-button-next），没有和对应滑块绑定，导致按钮只会控制第一个滑块，其他滑块的交互失效。

解决方案 #

1. 保留现有HTML结构（无需修改类名） #

你的HTML结构本身没问题，每个滑块的导航按钮都在独立的.collections-carousel容器内，这为按容器绑定提供了基础。

2. 修改JS初始化代码，循环处理每个滑块 #

遍历页面中所有滑块容器，逐个初始化Swiper，并将当前容器内的导航按钮绑定到对应滑块：

// 获取所有滑块的父容器
const carouselGroups = document.querySelectorAll('.collections-carousel');

// 遍历每个容器，初始化对应滑块
carouselGroups.forEach(group => {
  // 在当前容器内找到滑块主体和导航按钮
  const swiperContainer = group.querySelector('.featured-carousel');
  const prevButton = group.querySelector('.swiper-button-prev');
  const nextButton = group.querySelector('.swiper-button-next');

  // 初始化当前滑块
  new Swiper(swiperContainer, {
    // 你的Swiper基础配置（根据需求调整）
    slidesPerView: 'auto',
    spaceBetween: 24,
    loop: false,
    // 绑定当前容器内的导航按钮
    navigation: {
      nextEl: nextButton,
      prevEl: prevButton,
    },
    // 其他配置项（如分页、自动播放等）按需添加
  });
});

3. 验证CSS样式（可选） #

确保你的自定义Swiper样式是基于容器嵌套的，比如：

.collections-carousel .featured-carousel {
  /* 滑块容器样式 */
}
.collections-carousel .swiper-button-prev {
  /* 导航按钮样式 */
}

避免全局样式覆盖导致滑块显示异常。

关键逻辑说明 #

• 通过document.querySelectorAll('.collections-carousel')获取所有滑块组，确保每个滑块都被处理。
• 用group.querySelector()在当前滑块组内查找元素，避免跨组绑定导航按钮，保证每个滑块的交互独立。

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