Swiper.js 的 navigation 和 pagination 功能需显式导入对应模块并传入 modules 数组，仅设置布尔或配置对象而不引入模块将导致功能失效。
swiper.js 的 navigation 和 pagination 功能需显式导入对应模块并传入 `modules` 数组，仅设置布尔或配置对象而不引入模块将导致功能失效。
在 Vue 项目中集成 Swiper.js 时，一个常见误区是认为只要通过 `:navigation="true"` 或 `:pagination="{clickable: true}"` 就能自动启用对应 UI 组件——但实际上，Swiper v9+（当前主流版本）采用模块化架构，**所有高级功能（如导航箭头、分页器、滚动条、懒加载等）都必须作为独立模块显式导入并注册到 `:modules` prop 中**，否则即使配置正确，DOM 元素也不会渲染，交互逻辑亦不生效。✅ 正确做法如下：
-
导入所需模块：除
Swiper和SwiperSlide外，还需从"swiper"（非"swiper/vue"）导入Navigation和Pagination模块；EffectCreative同样应从"swiper"导入（注意命名无Swiper前缀）； -
注入
modules数组：将模块数组通过:modules绑定至<swiper></swiper>组件，顺序无关，但缺一不可； -
保持配置 props 不变：
:navigation="true"和:pagination配置项仍需保留，它们负责启用对应模块的运行时行为与样式逻辑。
完整可运行示例：
<template>
<Swiper
class="rounded-xl text-xs w-[95%]"
:modules="[EffectCreative, Navigation, Pagination]"
:slides-per-view="2"
:space-between="20"
:navigation="true"
:pagination="{ clickable: true, dynamicBullets: true }"
:autoplay="{ delay: 3000, disableOnInteraction: true }"
>
<SwiperSlide v-for="(product, index) in data" :key="index" class="py-6">
<ProductCard :data="product" />
</SwiperSlide>
</Swiper>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCreative, Navigation, Pagination } from 'swiper';
</script>⚠️ 注意事项：
- 若使用
<script setup></script>语法（推荐），请确保模块导入路径正确（"swiper"是核心模块包，"swiper/vue"仅提供组件封装）； - 不要混淆
SwiperNavigation或SwiperPagination等旧版命名 —— Swiper v9+ 已统一为Navigation/Pagination； - 导航按钮默认插入到
.swiper容器外部（前后各一个），分页器默认插入底部居中；若自定义位置，可通过 CSS 调整.swiper-button-next/.prev和.swiper-pagination类； - 如需响应式控制（例如小屏隐藏导航），建议结合
:navigation="{ enabled: isDesktop }"动态绑定，而非仅靠 CSSdisplay: none，以避免事件监听器残留。
总结：Swiper 的模块化设计提升了打包体积可控性，但也要求开发者主动“连接”功能与实现。牢记「配置 + 模块导入」双到位原则，即可稳定启用导航与分页能力。
立即学习“前端免费学习笔记（深入）”；
