求助：NPM安装Swiper JS后滑块无法正常工作

核心问题及修复方案 #

1. 未注册Navigation模块

Swiper 7.x及以上版本通过NPM引入时，核心库仅包含基础功能，额外模块（比如Navigation）必须手动注册。你已经导入了Navigation模块，但没有在初始化时声明，导致导航按钮和滑动功能失效。

修改初始化代码，添加modules选项：

const swiper = new Swiper(".swiper", {
  modules: [Navigation], // 注册Navigation模块
  slidesPerView: 3,
  spaceBetween: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

2. 初始化时机错误

你的滑块HTML是通过topAuthorsMarkup动态生成的，但当前代码在生成HTML后直接初始化Swiper，此时这段HTML还没有插入到DOM中，Swiper无法找到目标容器.swiper，自然无法初始化。

必须先把生成的HTML插入DOM，再执行Swiper初始化：

// 示例：将生成的滑块HTML插入页面指定容器（根据你的实际DOM结构调整选择器）
document.querySelector('body').insertAdjacentHTML('beforeend', topAuthorsMarkup);

// 现在再初始化Swiper
const swiper = new Swiper(".swiper", {
  modules: [Navigation],
  slidesPerView: 3,
  spaceBetween: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

3. 优化CSS导入方式

避免硬编码../node_modules路径，直接从Swiper包导入CSS更可靠，也符合模块化规范：

import Swiper from "swiper";
import "swiper/css"; // 导入核心样式
import "swiper/css/navigation"; // 导入导航模块样式
import { Navigation } from "swiper/modules";

额外检查项 #

• 执行npm list swiper确认安装的版本，若版本过旧或存在依赖冲突，重新安装最新稳定版：npm install swiper@latest
• 确保滑块容器的选择器唯一，比如用.top-authors__list替代.swiper，避免页面中其他Swiper容器干扰初始化。

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